jQuery tab选项卡插件(可多次使用)

这个选项卡插件估计是最简单的了，我使用过好多次了，不过用于对jquery理解还不是很深刻，不知道性能上有没有问题，总之代码很简介，可用性也比较强，支持一个页面多次调用，html标签可以随便的更改，只需要把class加上就行了！是不是很简单啊，

HTML代码:

<div class="tab">
<ul class="tab-hd">
<li>选项4</li>
<li>选项5</li>
<li>选项6</li>
</ul>
<ul class="tab-bd">
<li>内容4</li>
<li>内容5</li>
<li>内容6</li>
</ul>
</div>

CSS代码:

ul,li{ list-style:none;}
.tab{ width:450px; margin:0 auto 50px;}
.tab-hd { background:https://csswang.com/F93; overflow:hidden; zoom:1;}
.tab-hd li{ float:left; width:150px; color:https://csswang.com/fff; text-align:center; cursor:pointer;}
.tab-hd li.active{ background:https://csswang.com/F60;}
.tab-bd li{
display:none; padding:20px; 
border:1px solid https://csswang.com/ddd; border-top:0 none; font-size:24px;
}

JQ代码:

$(function(){
 function tabs(tabTit,on,tabCon){
   $(tabCon).each(function(){
      $(this).children().eq(0).show();
   });
 $(tabTit).each(function(){
     $(this).children().eq(0).addClass(on);
 });
  $(tabTit).children().hover(function(){
        $(this).addClass(on).siblings().removeClass(on);
         var index = $(tabTit).children().index(this);
         $(tabCon).children().eq(index).show().siblings().hide();
    });
     }
  tabs(".tab-hd","active",".tab-bd");
   });

查看:Demo

下载JQueryTab选项卡

本文链接：» https://www.csswang.com/exp/2128

转载请注明本文来源出处。