很好用的Tab標籤切換功能，延遲Tab切換。

一個網頁，Tab標籤的切換是常見的功能，但我發現不多有前端工程師在作該功能的時候，會爲用戶多想一想，若是你以爲鼠標hover到標籤上，而後切換到相應的內容，就那麼簡單的話，你將是一個不合格的前端工程師啊，其實你不這樣作，也無傷大雅，可是做爲前端的工程師，咱們能夠爲用戶作到更好。想一想若是一個網頁上，有不少標籤，而用戶鼠標在不經意間快速的滑動了一下，若是tab標籤的切換不通過特殊的處理的話，標籤所對應的內容會一同切換，甚至還會想服務器請求內容，增長服務器開銷，很顯然這一行爲不是用戶想要的，咱們徹底能夠避免或者減小這種狀況發生，經過延遲加切換標籤的操做，來提升用戶體驗，在多標籤的網頁上，這種尤其重要。下面直接貼源碼，你們能夠直接使用。

 html源碼：
<div class="Pannel ">
            <div class="tabTitle ">
                <ul class="tabs">
                    <li class="current"><a target="_blank">標籤一</a></li>
                    <li ><a target="_blank">標籤二</a></li>
                </ul>
                <div class="more">
                    <a target="_blank" href="">更多</a>
                </div>
            </div>
            <div class="tabList">
                <div  class="linklist f14">
                    標籤一內容
                </div>
                <div style="display: none;" class="linklist f14">
                  標籤二內容
                </div>
            </div>
        </div>

 

JS調用方式：
jQuery(".Pannel").Tabs(tabSelector: ".tabs li", conSelector: ".linklist", focusClass: "current");  //參數配置參考你具體的Class

Tab切換源碼

jQuery.fn.Tabs = function (options) {
    var defaults = {
        tabSelector: ".tabs li", // 標籤選項卡
        conSelector: ".tabcontent", //選項卡內容
        focusClass: "c", //標籤選中後的樣式
        moreTrigger: ".tabTitle .more .link", // 擴展 選項卡上有更多的連接狀況
        events: "mouseover", //事件類型，支持"mouseover", "click"
        selected: 0,  //默認選中標籤項
        delay: 0.2  //事件延遲時間
    };
    var events = ["mouseover", "click"];
    var settings = jQuery.extend({}, defaults, options);
    var that = this;
    var _tabs = jQuery(settings.tabSelector, that);
    var _cons = jQuery(settings.conSelector, that);
    var _more = jQuery(settings.moreTrigger, that);
    var _isDelay = settings.events == events[0] ? !0 : !1;

    void function () {
        var tab = _tabs.eq(settings.selected);
        if (tab && tab.length == 0) {
            tab = _tabs.eq(0);
        }
        tab.addClass(settings.focusClass);
        tab.siblings(settings.tabSelector).removeClass(settings.focusClass);

        var cons = _cons.eq(settings.selected);
        if (cons && cons.length == 0) {
            cons = _cons.eq(0);
        }
        cons.show();
        cons.siblings(settings.conSelector).hide();

        var more = _more.eq(settings.selected);
        if (more && more.length == 0) {
            more = _more.eq(0);
        }
        more.show();
        more.siblings().hide();
    }();

    _tabs.each(function (i, v) {
        jQuery(v).on(settings.events, function () {
            var _this = this;
            delay.apply(this, [settings.delay, function () {
                jQuery(_this).addClass(settings.focusClass);
                jQuery(_this).siblings(settings.tabSelector).removeClass(settings.focusClass);
                jQuery(_cons[i]).show();
                jQuery(_cons[i]).siblings(settings.conSelector).hide();
                jQuery(_more[i]).show();
                jQuery(_more[i]).siblings().hide();
            }, _isDelay])
        });
    });
    //接收兩個參數 t延遲時間秒爲單位，fn要執行的函數,m是否執行延遲取決於事件的類型
    var delay = function (t, fn, m) {
        if (m) {
            var _this = this,
                d = setInterval(function () {
                    fn.apply(_this);
                }, t * 1000);
            _this.onmouseout = function () {
                clearInterval(d);
            };
        }
        else fn.apply(this);
    }
}