您的位置：首页 > Web前端 > JavaScript

javascript tab onclick

2014-03-09 22:13 537 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<title>my_tab</title>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<style>
ul, li{list-style:none;}
#tab ul li{float:left;width:40px;}
.clearBoth{clear:both;}
.ok{display:none;}
.dis{display:block;}
</style>
<body>
<div id="tab">
<ul>
<li><a onClick="selectTag('tagContent0', this)" href="javascript:void(0)">1111</a></li>
<li><a onClick="selectTag('tagContent1', this)" href="javascript:void(0)">222</a></li>
<li><a onClick="selectTag('tagContent2', this)" href="javascript:void(0)">333</a></li>
</ul>
<br class="clearBoth" />
<div id="tagContent0" class="ok dis">
xxxxx
</div>

<div id="tagContent1" class="ok">
yyyyyyyyyyy
</div>

<div id="tagContent2" class="ok">
zzzzz
</div>
</div>
<script>
function selectTag(showContent, selfObj)
{
var tag = document.getElementById("tab").getElementsByTagName("li");
var tagLength = tag.length;
for(i=0; i<tagLength; i++)
{
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";

for(i=0; j=document.getElementById("tagContent"+i); i++)
{
if(i >= tagLength) break;
j.style.display = "none";
}
document.getElementById(showContent).style.display="block";
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航