转载：JQuery制作的选项卡改进版

JQuery制作的选项卡改进版

记得去年刚开始在博客园写日志第一篇文章就是关于选项卡的，题目叫《JQuery制作的选项卡，重点体现在JS与HTML的分离》。最近做项目的时候，再回头看这段代码感觉写得太零散，所有方法函数都是全局函数，没用整合成一个完整的方法。这样的后果就是不便于管理，代码拷贝的时候容易遗漏，而且方法写得太死，扩展性不好。所以趁着这次做新项目，把这个效果改进下封装成一个完整的方法。

演示地址：http://www.myliwu.com/xzwBlog/tab/Tab.html

老规矩，首先分析Html（我一直认为良好的html结构是实现好程序的基石）

 1  <!--  包裹选项卡的父级层  -->
 2  < div  class ="" >
 3       <!--  选项卡列表，ul外用一个宽度足够长的div包裹，做为遮罩层，让里面的ul列表在一行显示而不会折行  -->
 4       < div  style ="" >
 5           < ul  class ="" >
 6               < li >< span > 选项卡标签 1 </ span ></ li >
 7               < li >< span > 选项卡标签 2 </ span ></ li >
 8               < li >< span > 选项卡标签 3 </ span ></ li >
 9           </ ul >
10       </ div >
11       <!--  包裹内容层的父级层  -->
12       < div  class ="" >
13           <!--  具体的内容层  -->
14           < div  class ="" > 1.1 </ div >
15           < div  class ="" > 1.2 </ div >
16           < div  class ="" > 1.3 </ div >
17       </ div >
18  </ div >
19 

样式代码就不放上来了，大家用firebug看效果更好。

接着是程序代码：

 1  j.fn.tabs  =   function (tabList,tabTxt,options){
 2       var  _tabList  =  j( this ).find(tabList);
 3       var  _tabTxt  =  j( this ).find(tabTxt);
 4      
 5       // 为了简化操作，强制规定选项卡必须用li标签实现
 6       var  tabListLi  =  _tabList.find( " li " );
 7       var  defaults  =  {currentTab: 0 ,defaultClass: " Current " };
 8       var  o  =  j.extend({},defaults,options);
 9      _tabList.find( " li:eq( " + o.currentTab + " ) " ).addClass(o.defaultClass);
10      
11       // 强制规定内容层必须以div来实现
12      _tabTxt.children( " div " ).each( function (i){
13          j( this ).attr( " id " , " div " + i);                          
14      }).eq(o.currentTab).css({ " display " : " block " });
15      
16      tabListLi.each(
17           function (i){
18              j(tabListLi[i]).click(
19                   function (){
20                       if (j( this ).className  !=  o.defaultClass)
21                      {
22                          j( this ).addClass(o.defaultClass).siblings().removeClass(o.defaultClass);
23                      }
24                      _tabTxt.children( " div " ).eq(i).css({ " display " : " block " }).siblings().css({ " display " : " none " });
25                  }
26              )
27          }
28      );
29       return   this ;
30  };

最后是调用：

1  j(document).ready( function (){
2      j( " #ex01 " ).tabs( " .ContactMenu " , " .ContactBox " ,{currentTab: 0 });
3      j( " #ex01 " ).find( " .exContent2 " ).tabs( " .ContactMenu2 " , " .ContactBox2 " ,{currentTab: 0 });
4      
5      j( " #ex02 " ).tabs( " .ContactMenu " , " .ContactBox " ,{currentTab: 1 });
6      j( " #ex02 " ).find( " .exContent2 " ).tabs( " .ContactMenu2 " , " .ContactBox2 " ,{currentTab: 1 });
7  });

OK，搞定。代码实现方式都不难，有点jquery基础的一看就明白了。关键是如果没有业务需求，可能就不会促使我们去发现旧问题的不足，以及想新思路新方法来改进它。一句话：业务需求促进技术更新。

演示地址：http://www.myliwu.com/xzwBlog/tab/Tab.html

转载于:https://www.cnblogs.com/yuzhongwusan/archive/2009/05/05/1450134.html