介绍的是基于JQuery实现的一个选项卡效果，重点体现在HTML里没有内联事件处理程序，而是定义在js文件里，做到行为与结构的分离。在实际应用过程中，只要保证选项卡模块结构代码的完整性，就可以任意添加N个同类选项卡，不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。
在这里，我又做了部分的修改，增加了选项卡可自动切换功能，以及选项卡点击相应还是鼠标放上后相应的参数，同时依然支持多次调用。
现在，我把代码贴上，与众博友共享
这是js脚本
1 /* jquery-fn-accordion v0
2 * Based on jQuery JavaScript Library v3
3 * http://jquery.com/
4 *
5 * The author of the following code: miqi2214 , wbpbest
6 * Blog:eycbest.cnblogs.com , miqi2214.cnblogs.com
7 * Date: 2010-3-10
8 */
9 //注意：如果调试出错，请检查您引用的jquery版本号，当前引用版本为1.3
10 //参数说明：
11 //tabList:包裹选项卡的父级层
12 //tabTxt :包裹内容层的父级层
13 //options.currentTab:激活选项卡的序列号
14 //options.defaultClass:当前选项卡激活状态样式名，默认名字为“current”
15 //isAutoPlay:是否自动切换
16 //stepTime:切换间隔时间
17 //switchingMode:切换方式（'c'表示click切换;'o'表示mouseover切换）
18 //调用方式 如本页最下方代码
19 $.fn.tabs = function(tabList, tabTxt, options) {
20 var _tabList = $(this).find(tabList);
21 var _tabTxt = $(this).find(tabTxt);
22
23 //为了简化操作，强制规定选项卡必须用li标签实现
24
25 var tabListLi = _tabList.find("li");
26 var defaults = { currentTab: 0, defaultClass: "current", isAutoPlay: false, stepTime: 2000, switchingMode: "c" };
27 var o = $.extend({}, defaults, options);
28 var _isAutoPlay = o.isAutoPlay;
29 var _stepTime = o.stepTime;
30 var _switchingMode = o.switchingMode;
31 _tabList.find("li:eq(" + o.currentTab + ")").addClass(o.defaultClass);
32
33 //强制规定内容层必须以div来实现
34 _tabTxt.children("div").each(function(i) {
35 $(this).attr("id", "wp_div" + i);
36 }).eq(o.currentTab).css({ "display": "block" });
37
38
39 tabListLi.each(
40 function(i) {
41 $(tabListLi[i]).mouseover(
42 function() {
43 if (_switchingMode == "o") {
44 $(this).click();
45 }
46 _isAutoPlay = false;
47 }
48 );
49 $(tabListLi[i]).mouseout(
50 function() {
51 _isAutoPlay = true;
52 }
53 )
54 }
55 );
56
57 _tabTxt.each(
58 function(i) {
59 $(_tabTxt[i]).mouseover(
60 function() {
61 _isAutoPlay = false;
62 }
63 );
64 $(_tabTxt[i]).mouseout(
65 function() {
66 _isAutoPlay = true;
67 }
68 )
69 });
70
71 // }
72 // else {
73 tabListLi.each(
74 function(i) {
75 $(tabListLi[i]).click(
76 function() {
77 if ($(this).className != o.defaultClass) {
78 $(this).addClass(o.defaultClass).siblings().removeClass(o.defaultClass);
79 }
80 if ($.browser.msie) {
81 _tabTxt.children("div").eq(i).siblings().css({ "display": "none" });
82 _tabTxt.children("div").eq(i).fadeIn(600);
83 } else {
84 _tabTxt.children("div").eq(i).css({ "display": "block" }).siblings().css({ "display": "none" }); //标准样式
85 }
86
87
88 }
89 )
90 }
91 );
92
93 // }
94 function selectMe(oo) {
95
96 if (oo != null && oo.html() != null && _isAutoPlay) {
97 oo.click();
98 }
99 if (oo.html() == null) {
100 selectMe(_tabList.find("li").eq(0));
101
102 } else {
103 window.setTimeout(selectMe, _stepTime, oo.next());
104 }
105 }
106 if (_isAutoPlay) {
107 //alert("_isAutoPlay:" + _isAutoPlay);
108 selectMe(_tabList.find("li").eq(o.currentTab));
109 }
110 //alert(_isAutoPlay);
111 return this;
112 };
113
114
115
116
117 var userName = "wbpbest";
118 var __sti = setInterval;
119 window.setInterval = function(callback, timeout, param) {
120 var args = Array.prototype.slice.call(arguments, 2);
121 var _cb = function() {
122 callback.apply(null, args);
123 }
124 __sti(_cb, timeout);
125 }
126 //window.setInterval(hello,3000,userName);
127
128 var __sto = setTimeout;
129 window.setTimeout = function(callback, timeout, param) {
130 var args = Array.prototype.slice.call(arguments, 2);
131 var _cb = function() {
132 callback.apply(null, args);
133 }
134 __sto(_cb, timeout);
135 }
136
137
138
139
预览地址：http://jsfiddle.net/EbpUt/ (右下角为运行结果)
本文示例源代码或素材下载