很好用的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);
    }
}

很好用的Tab标签切换功能，延迟Tab切换。

相关推荐