记得去年刚开始在博客园写日志第一篇文章就是关于选项卡的，题目叫《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