由于代碼都有注釋，所以不多加解釋，大家都知道的。直接貼代碼：

?代碼如下：

/*** 簡單的Tab切換* 支持可配置項 如下參數 */function Tab(){this.config = {type : 'mouseover', //類型 默認為鼠標移上去autoplay : true, // 默認為自動播放triggerCls : '.list', // 菜單項panelCls : '.tabContent', // 內容項index : 0, // 當前的索引0switchTo : 0, // 切換到哪一項interval : 3000, // 自動播放間隔時間 默認為3 以s為單位pauseOnHover : true, // 鼠標放上去是否為暫停 默認為truecurrent : 'current', // 當前項添加到類名hidden : 'hidden', // 類名 默認為hiddencallback : null // callback函數 };this.cache = {timer : undefined,flag : true};}Tab.prototype = {init: function(options){this.config = $.extend(this.config,options || {});var self = this,_config = self.config;self._handler();},_handler: function(){var self = this,_config = self.config,_cache = self.cache,len = $(_config.triggerCls).length;$(_config.triggerCls).unbind(_config.type);$(_config.triggerCls).bind(_config.type,function(){_cache.timer && clearInterval(_cache.timer);var index = $(_config.triggerCls).index(this);!$(this).hasClass(_config.current) && $(this).addClass(_config.current).siblings().removeClass(_config.current);$(_config.panelCls).eq(index).removeClass(_config.hidden).siblings().addClass(_config.hidden);// 切換完 添加回調函數_config.callback && $.isFunction(_config.callback) && _config.callback(index);});// 默認情況下切換到第幾項if(_config.switchTo) {$(_config.triggerCls).eq(_config.switchTo).addClass(_config.current).siblings().removeClass(_config.current);$(_config.panelCls).eq(_config.switchTo).removeClass(_config.hidden).siblings().addClass(_config.hidden);}// 自動播放if(_config.autoplay) {start();$(_config.triggerCls).hover(function(){if(_config.pauseOnHover) {_cache.timer && clearInterval(_cache.timer);_cache.timer = undefined;}else {return;}},function(){start();});}function start(){_cache.timer = setInterval(autoRun,_config.interval);}function autoRun() {if(_config.switchTo && (_config.switchTo == len-1)){if(_cache.flag) {_config.index = _config.switchTo;_cache.flag = false;}}_config.index++;if(_config.index == len) {_config.index = 0;}$(_config.triggerCls).eq(_config.index).addClass(_config.current).siblings().removeClass(_config.current);$(_config.panelCls).eq(_config.index).removeClass(_config.hidden).siblings().addClass(_config.hidden);}}};

頁面上調用方式如下：

$(function(){new Tab().init({switchTo: 1,callback: function(index){console.log(index);}}); });

?

總結

以上是生活随笔為你收集整理的简单的Tab切换组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。