功能较简单的jq tab选项卡

最新推荐文章于 2025-09-05 11:22:47 发布

天为我蓝

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量68

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/webFrontDev/archive/2012/11/24/2786036.html

本文介绍了一个自定义的Tab插件，通过设置事件类型和自动切换功能，实现了Tab面板的无缝切换效果。代码示例展示了如何在页面加载时自动启动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/archive/2012/11/24/2786036.html