js-tab标签效果

来源:互联网 发布:蔡英文 知乎 编辑:程序博客网 时间:2024/04/28 14:45
<div class="sid_b_tab">
<a href="#" id="one1" onmouseover="setTab('one',1,3)">项目工程</a>
<a href="#" id="one2"  onmouseover="setTab('one',2,3)">综合审计</a>
<a href="#" id="one3" onmouseover="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();
});

0 0