Question

我是Javascript的新手，正在开展以下工作：

$('.tabs-holder li').click(function () {
    var tabID = $(this).attr('data-tab-id');
    $(this).closest('.tabbed-content').find('.tabs-holder li').removeClass('active');
    $(this).addClass('active');
    $(this).closest('.tabbed-content').find('.content-holder').children('.tab-content').removeClass('active').siblings('.tab-content[data-tab-id=' + tabID + ']').addClass('active');
});

我试图让它在所有具有相同值的data-tab-id的div上工作，但它只对一个div起作用。

JSFiddle here http://jsfiddle.net/dynaf9pc/8/

Answer 1

您尝试定位的内容容器是.tabbed-content的兄弟，因此您需要退回到父.tabbed-content，然后导航到其兄弟：

   $(this).closest(".tabbed-content")
          .siblings(".content-holder")
          .find('.tab-content[data-tab-id=' + tabID + ']')
          .addClass('active')
          .siblings()
          .removeClass('active');

此外，我重构了一些冗余的JS，并通过链接选择器缩短了它：

FIDDLE

Answer 2

您没有遍历这些元素。如果你添加每个（），它将经过它将找到的多个div。

$('.tabs-holder li').click(function () {
    var tabID = $(this).attr('data-tab-id');
    $(this).closest('.tabbed-content').find('.tabs-holder li').removeClass('active');
    $(this).addClass('active');
    $(this).closest('.tabbed-content')
        .find('.content-holder')
        .children('.tab-content')
        .removeClass('active')
        .siblings('.tab-content[data-tab-id=' + tabID + ']')
        .each(function() {
            $(this).addClass('active');
        })
});

选项卡式内容不适用于多个div

2 个答案: