javascript tab onclick

浏览数：26 / 时间：2015年06月09日

<!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>