javascript - jQuery 自定义选项卡无法正常工作

Question

我在弄清楚为什么我的选项卡内容无法正确切换，似乎只适用于最后一个选项卡时遇到了一些麻烦。有人有什么想法吗？

https://jsfiddle.net/x04o2kb6/

JS:

$(document).ready(function($) {

    var activateTab = function(index) {
        var tab = $(".tabs-menu li:eq(" + index + ")"),
            tabContent = $(".tab div:eq(" + index + ")");

        tab.addClass("active");
        tab.siblings().removeClass("active");
        tabContent.siblings().css("display", "none");
        tabContent.show();
    }

    var automation = {
        start: function() {
            this.current = setInterval(function() {
                var currentIndex = $(".tabs-menu li.active").index(),
                    max = $(".tabs-menu li.active").parent().children().length;
                activateTab(currentIndex + 1 < max ? currentIndex + 1 : 0);
            }, 2000);
        },
        stop: function() {
            if (this.current) {
                clearInterval(this.current);
            }
        }
    }

    $(".tabs-menu a").click(function(event) {
        event.preventDefault();
        activateTab($(event.currentTarget).parent().index());
    });

    //automation.start();

});

Answer 1

按如下方式更改 activateTab 函数 -

var activateTab = function(index) {
    var tab = $(".tabs-menu li:eq(" + index + ")"),
        tabContent = $(".tab > div:eq(" + index + ")");

    tab.addClass("active");
    tab.siblings().removeClass("active");
    tabContent.siblings().css("display", "none");
    tabContent.show();
}