程序博客网 > xperia更新挂起网络

js 函数实现导航选项卡功能

来源：互联网发布：xperia更新挂起网络编辑：程序博客网时间：2024/05/05 08:46

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" onmouseover="nTabs(this,0);"><span style="margin-right:12px;">二手交易</span></li>
                  <li class="normal" onmouseover="nTabs(this,1);"><span style="margin-right:12px;">游戏</span></li>
                  <li class="normal" onmouseover="nTabs(this,2);"><span style="margin-right:12px;">交友</span></li>
                  <li class="normal" onmouseover="nTabs(this,3);"><span style="margin-right:12px;">微博</span></li>
                  <li class="normal" onmouseover="nTabs(this,4);"><span style="margin-right:12px;">商城</span></li>
                  <li class="normal" onmouseover="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>

xperia更新挂起网络

xperia更新挂起网络

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子怎么去除丝状疣丝状疣脖子腋窝丝状疣颈部丝状疣身上长了丝状疣怎么办丝状疣痒吗丝状疣怎么得的丝状疣会不会传染去除丝状疣腋窝丝状疣图片乳头丝状疣丝状疣可以剪掉吗丝状疣怎么回事皮肤丝状疣毛囊炎面部脖子上长瘊子图片线瘊脖子上长猴子是福是祸脖子上长小猴子丝珂sike 丝瓜子能吃吗丝瓜子的功效与作用三只松鼠瓜子丝瓜汁巨型丝瓜丝瓜水能代替爽肤水吗丝瓜水能直接喝吗丝瓜水能喝吗千纤草丝瓜水丝瓜水可以天天敷脸吗千纤草丝瓜水被曝光千纤草丝瓜水激素超标丝瓜络煮水方法下奶丝瓜水的价格千纤草丝瓜水怎么样巨型一号丝瓜水丝瓜水怎么用巨型一号丝瓜水不靠谱丝瓜水的作用丝瓜水怎么保存丝瓜水价格