更多jQuery常用外掛使用請訪問：jQuery常用外掛彙總

tab標籤切換是網頁中最常見不過的外掛了，所以寫一個自用的tab標籤切換外掛，偷懶一下。
上原始碼，想用的直接複製走，儲存在一個js檔案即可使用。

;(function(window,$,undefined){
  $.fn.extend({
    // tab, 所有的option都是可選項，
    'tab': function(option){
      var defaults = {
            index: 0,  //tabs焦點的索引值
            active: 'active', //tabs焦點的className
            attr: 'data-index', //tabs需要增加的自定義屬性，方便取焦點索引值使用的,防止data-index與其它自定義屬性衝突
            autoplay: false,  //tabs是否自動切換
            speed: 1000,  //tabs自動切換速度
            eventtype: '',  //觸發焦點切換的事件型別，目前可傳'click'、'touchend'。
            content: '',  //tbas切換時候對應需要切換的內容選擇器(用於jq獲取content元素集合)，不需要內容切換的時候，此選項可不傳值
            contentactive: 'active', //content焦點的className
            contentattr: 'data-index', //content需要增加的自定義屬性，方便取焦點索引值使用的,防止data-index與其它自定義屬性衝突
            callbackContent:function(){},  //滑鼠移入content時候的回撥函式,比如僅在滑鼠移入content之後，才會顯示當前選中項
            callback:function(){}  //滑鼠移入tabs時候的回撥函式,比如僅在滑鼠移入tabs之後，才會顯示當前選中項
          },
          opts = $.extend({}, defaults, option);
      
      var tab = {
        $tab: this,
        iTabLength: 0,  //tabs的總個數
        index: opts.index,  //tabs焦點的索引值
        className: opts.active,  //tabs焦點的className
        attrName: opts.attr,  //tabs需要增加的自定義屬性，方便取焦點索引值使用的
        $content: $(opts.content),  //用jq獲取content元素集合
        iContentLength: 0,  //用jq獲取content元素集合
        contentClassName: opts.contentactive,  //content焦點的className
        contentAttrName: opts.contentattr,  //content需要增加的自定義屬性，方便取焦點索引值使用的
        autoplay: opts.autoplay,  //tabs是否自動切換
        iSpeed: opts.speed,  //tabs自動切換速度
        eventtype: opts.eventtype,  //觸發切換的事件型別
        callbackContent: opts.callbackContent,  //滑鼠移入content時候的回撥函式
        callback: opts.callback,  //滑鼠移入tabs時候的回撥函式
        timer: null,  //tabs定時器變數
        // 初始化函式
        'init': function(){
          // 初始化個別資料屬性
          this.initProp();

          // 給tabs設定自定義屬性
          this.setAttr();

          // 給content內容設定自定義屬性
          this.setContentAttr();

          // 重新計算index，防止傳入錯誤的範圍
          this.countIndex();

          // 初始化焦點元素
          this.setFocus();

          // 自動切換事件，內部會自己判斷
          this.play();

          // 滑鼠移入tabs的事件
          this.enterTabs();

          // 滑鼠移出tabs的事件
          this.leaveTabs();

          // 滑鼠移入content的事件
          this.enterContent();

          // 滑鼠移出content的事件
          this.leaveContent();
        },
        // 初始化個別資料屬性
        'initProp': function(){
          // 獲取tabs的總長度
          this.iTabLength = this.$tab.length;
          this.iContentLength = this.$content.length;
        },
        // 切換tabs焦點樣式
        'setFocus': function(){
          // 先清除樣式，因為有可能不是同級，所以沒用.siblings()方法清除樣式
          this.$tab.removeClass(this.className);
          // 再給焦點新增樣式
          this.$tab.eq(this.index).addClass(this.className);

          // 滑鼠移入tabs時候的回撥函式
          this.callback&&this.callback();

          // 如果有內容需要切換，就進行內容切換
          if (!!this.iContentLength) {
            this.setContentFocus();
          }
        },
        // 設定content焦點樣式
        'setContentFocus': function(){
          // 先清除樣式，因為有可能不是同級，所以沒用.siblings()方法清除樣式
          this.$content.removeClass(this.contentClassName);
          // 再給焦點新增樣式
          this.$content.eq(this.index).addClass(this.contentClassName);
        },
        // 給tabs設定自定義屬性，方便取索引值
        'setAttr': function(){
          // 存this物件，方便下面指向呼叫
          var _this = this;
          // 給每個tabs物件新增data-index自定義屬性,方便取當前元素的索引值
          this.$tab.each(function(index) {
            // 切記！！！each回撥裡面的this是元素的js物件，沒用jq方法
            this.setAttribute(_this.attrName, index);
          });
        },
        // 給tabs設定自定義屬性，方便取索引值
        'setContentAttr': function(){
          // 存this物件，方便下面指向呼叫
          var _this = this;
          // 如果有content內容需要切換，同樣設定自定義屬性
          if (!!this.iContentLength) {
            this.$content.each(function(index) {
              // 切記！！！each回撥裡面的this是元素的js物件，沒用jq方法
              this.setAttribute(_this.contentAttrName, index);
            });
          }
        },
        // 滑鼠移入tabs的事件
        'enterTabs': function(){
          // 存this物件，方便下面指向呼叫
          var _this = this;
          // 移入元素清空定時器，並給當前元素設定焦點樣式
          this.$tab.on('mouseenter',function(){
            // 清空定時器
            clearInterval(_this.timer);
            //  如果滑鼠反覆移入當前焦點，就不進行切換渲染
            if (_this.index == parseInt($(this).attr(_this.attrName))) {
              return false;
            }
            if (_this.eventtype == 'click') {
               $(this).on(_this.eventtype,function(){
                //  如果是當前焦點，就不進行切換渲染
                 if (_this.index != parseInt($(this).attr(_this.attrName))) {
                   // 改變index索引值
                   _this.index=parseInt($(this).attr(_this.attrName));
                   // 設定tabs焦點樣式
                   _this.setFocus();
                 }
                })
            }else{
              // 改變index索引值
              _this.index=parseInt($(this).attr(_this.attrName));
              // 設定tabs焦點樣式
              _this.setFocus();
            }
          });
        },
        // 滑鼠移出tabs的事件
        'leaveTabs': function(){
          // 存this物件，方便下面指向呼叫
          var _this = this;
          // 移出元素開啟定時器
          this.$tab.on('mouseleave',function(){
            _this.play();
          });
        },
        // 滑鼠移入content的事件
        'enterContent': function(){
          // 存this物件，方便下面指向呼叫
          var _this = this;
          // 移入元素清空定時器，並給當前元素設定焦點樣式
          this.$content.on('mouseenter',function(){
            // 清空定時器
            clearInterval(_this.timer);
            console.log(2342,this);
            
            // 滑鼠移入content時候的回撥函式
            _this.callbackContent&&_this.callbackContent();
          });
        },
        // 滑鼠移出content的事件
        'leaveContent': function(){
          // 存this物件，方便下面指向呼叫
          var _this = this;
          // 移出元素開啟定時器
          this.$content.on('mouseleave',function(){
            _this.play();
          });
        },
        // 計算索引值是否超出tabs的最大長度
        'countIndex': function(){
          this.index = parseInt(this.index);
          // 如果index小於0，重置為0
          if (this.index<0) {
            this.index=0;
          }
          // 如果index超出tabs的總個數，index歸零
          this.index = this.index % this.iTabLength;
        },
        // 焦點index自增事件
        'addIndex': function(_this){
          // 因為在定時器呼叫addIndex函式，this指向出現問題，所以需要修改this指向
          return function(){
            // index自增
            _this.index++;
            
            // 重新判斷index 
            _this.countIndex();

            // 設定樣式
            _this.setFocus(_this.index);
          }
        },
        // 自動焦點切換事件
        'play': function(){
          if (this.autoplay) {
            // 自動切換定時器
            this.timer = setInterval(this.addIndex(this), this.iSpeed);
          }
        }
      };

      // 初始化tab函式
      tab.init();

    }
  });
})(window,jQuery);