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切换(修改)的主要内容,如果未能解决你的问题,请参考以下文章

小程序--导航栏切换(tab切换)

小程序--导航栏切换(tab切换)

当使用tablayout切换片段时,所有片段都会重新创建

vc++2010设置和c#一样的代码段,vs2010 两下tab设置

tab切换(修改)

小程序做一个能够左右滑动切换的多tab页面