js 实在是做web特效的好东西,通过这个选项卡可以在一个网页载入大量的内容 ,函数具体如下:
<script type="text/javascript">
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;// classname 属性可以取得对象的class 值
var tabObj = thisObj.parentNode.id; //得到父节点的id 比如 <body><title></title></body>,title 的父节点是body
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (i == Num)
{
thisObj.className = "active";
document.getElementById(tabObj+"_Content"+i).style.display = "block";
}else{
tabList[i].className = "normal";
document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
}
}
</script>
<div class="TabTitle">
<ul id="myTab0">
<li class="active" οnmοuseοver="nTabs(this,0);"><span style="margin-right:12px;">二手交易</span></li>
<li class="normal" οnmοuseοver="nTabs(this,1);"><span style="margin-right:12px;">游戏</span></li>
<li class="normal" οnmοuseοver="nTabs(this,2);"><span style="margin-right:12px;">交友</span></li>
<li class="normal" οnmοuseοver="nTabs(this,3);"><span style="margin-right:12px;">微博</span></li>
<li class="normal" οnmοuseοver="nTabs(this,4);"><span style="margin-right:12px;">商城</span></li>
<li class="normal" οnmοuseοver="nTabs(this,5);"><span style="margin-right:12px;">论坛</span></li>
</ul>
</div>
<!-- 内容开始 -->
<div class="TabContent">
<div id="myTab0_Content0"></div>
<div id="myTab0_Content1" class="none"></div>
<div id="myTab0_Content2" class="none"></div>
</div>