js-tab标签效果

最新推荐文章于 2020-11-02 03:54:59 发布

sevenbblythelulu

最新推荐文章于 2020-11-02 03:54:59 发布

阅读量605

点赞数

分类专栏： js 文章标签： js tab html

本文链接：https://blog.csdn.net/sevenbblythelulu/article/details/45694891

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<div class="sid_b_tab">
<a href="#" id="one1" οnmοuseοver="setTab('one',1,3)">项目工程</a>
<a href="#" id="one2" οnmοuseοver="setTab('one',2,3)">综合审计</a>
<a href="#" id="one3" οnmοuseοver="setTab('one',3,3)">通知公告</a>
</div>

<div class="c-con" id="c_one_1"></div>
<div class="c-con" id="c_one_2"></div>
<div class="c-con" id="c_one_3"></div>

<script>

function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);//可不用

menu.className=i==cursel?"c-current":"";//可不用

var con=document.getElementById("c_"+name+"_"+i);
con.style.display=i==cursel?"block":"none";
}
}
</script>

cursel 选中

第二种方法
<ul>
<li></li>
</ul>
<div>
</div>
$(".mail_tabul li").click(function(){
$(this).addClass("current").siblings().removeClass("current");
$(".mail_tabcon").eq($(this).index()).show().siblings("ul.mail_tabcon").hide();
});