JQuery 制作的选项卡改进版之改进版

首先，感谢 miqi2214 ，在他的一篇博文中，我发现了《JQuery 制作的选项卡改进版》

介绍的是基于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 

如果不会使用 请下载这里的  demo