jQuery 自定义标签无法正常工作

Question

我有点难以理解为什么我的选项卡内容无法正确切换，似乎只能在最后一个选项卡上工作。有人有什么想法吗？

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();
}

Answer 2

有错误 css select 或者，当您 selecting 选项卡内容 div 时。仅将此用于 select 孩子 tabContent = $(".tab > div:eq(" + index + ")"); 您的css select或选择了所有div。

Answer 3

您没有提到正确的 tabContent。它总是用来获取 index，即无论你传递给函数什么，都可以是 3、2，并且无论其层次结构如何，都会获取特定的 div。只需更改为确切的 class：

tabContent = $(".tab div.mainFeatureCopy:eq(" + index + ")");

在这里引用 div 及其 class 即 mainFeatureCopy

DEMO

Answer 4

请检查我已经更新了tabContent = $(".tab>div:eq(" + index + ")");检查Fiddle

Answer 5

tabContent = $(".tab div:eq(" + index + ")")

没有得到正确的对象，你应该使用

tabContent = $(".tab-content:eq(" + index + ")")

jQuery 自定义标签无法正常工作

jQuery custom tabs not working correctly

javascript

jquery

tabs