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

当您选择标签内容div时，有错误的css选择器。使用此选项仅选择孩子tabContent = $(".tab > div:eq(" + index + ")"); 你的css选择器选中了所有的div。

Answer 3

你没有引用正确的tabContent。它总是用于获取index，即你传递给函数的任何东西，比如可以是3,2，并且不管它的层次结构如何都会获取特定的div。只需改为完全类：

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

在这里引用div及其类mainFeatureCopy

<强> DEMO

Answer 4

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

Answer 5

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

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

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

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

5 个答案: