tab切换(修改)
Posted rain92
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了tab切换(修改)相关的知识,希望对你有一定的参考价值。
html代码:
1 <div class="tabContent"> 2 <ul class="tab clearFix"> 3 <li class="fl active">第一项</li> 4 <li class="fl">第二项</li> 5 <li class="fl">第三项</li> 6 </ul> 7 <div style="display: block;">11111</div> 8 <div>22222</div> 9 <div>33333</div> 10 </div>
css代码:
1 ul.tab li{width: 100px;height: 40px;line-height: 40px;border: 1px solid #dbdbdb;text-align: center;} 2 ul.tab li.active{border: 1px solid #45b035;} 3 .tabContent div{width:306px;height: 300px;line-height:300px;text-align:center;color:#ff0;background: #dbdbdb;display: none;}
js代码:
1 function tabList(Tab,index){ 2 $(Tab).find("div").hide(); 3 $(Tab).find("li").removeClass("active"); $(Tab).find("div").eq(index).show().siblings("div").hide(); 4 $(Tab).find("li").eq(index).addClass("active").siblings().removeClass("active"); 5 }
调用:
$(".tab li").on("click",function(){ tabList(".tabContent",$(this).index());})
以上是关于tab切换(修改)的主要内容,如果未能解决你的问题,请参考以下文章