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){
 2     var Li=$(Tab).find("li");
 3     var Div=$(Tab).find("div");
 4     Li.on("click",function(){
 5         var index=$(this).index();
 6         Li.removeClass("active")
 7         Div.hide();
 8         $(this).addClass("active");
 9                 $(this).parent().siblings().eq(index).show();
10     })
11 }
12 tabList(".tabContent");

运行效果：

 

posted @ 2016-06-14 14:32  rain92  阅读(137)  评论(0)  编辑  收藏  举报