功能较简单的jq tab选项卡

(function ($) {
    //tab插件
    //可自定义事件
    $.fn.mytab = function (options) {
        var defaults = {
            tabContent:'.tabContent > li',
            type:'mouseenter',
            autotab:false, //自动切换
            callback:null
        };
        options = $.extend(defaults, options);
        var _this = $(this);
        var $tabConli = $(options.tabContent);
        var num = _this.length-1,
            count = 0,
            timer=null;
        function autoAnim(){
            timer=setTimeout(function(){
                count = (count == num) ? 0 : count + 1;
                _this.eq(count).trigger(options.type);
                setTimeout(arguments.callee,3000);
            },3000);
        }
        return this.each(function () {
            _this.bind(options.type,function () {
                clearTimeout(timer);
                $(this).addClass('on').siblings().removeClass('on');
                var index = _this.index(this);
                $tabConli.eq(index).stop(false,true).show(function(){
                    autoAnim();
                }).siblings().hide();
            }).eq(0).trigger(options.type);
            if (options.autotab) {
                autoAnim();
            }
        });

    };
})(jQuery);

$(document).ready(function () {
    $('.tabMenu > li').mytab({
        autotab:true
    });
});

  

原文地址:https://www.cnblogs.com/webFrontDev/p/2786036.html