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

最新推荐文章于 2024-04-29 19:14:08 发布

mashuaimamaphp

最新推荐文章于 2024-04-29 19:14:08 发布

阅读量552

点赞数

分类专栏： js技术文章文章标签： class div function 商城游戏 web

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/mashuaimamaphp/article/details/5732558

版权

js技术文章专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 函数实现导航选项卡功能

<br /> js 实在是做web特效的好东西，通过这个选项卡可以在一个网页载入大量的内容，函数具体如下：<br /><script type="text/javascript"><br /><br />function nTabs(thisObj,Num){<br /><br />if(thisObj.className == "active")return;// classname 属性可以取得对象的class 值<br /><br />var tabObj = thisObj.parent
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。