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

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 在这里 http://jsfiddle.net/dynaf9pc/8/

Answer 1

您尝试定位的内容容器是 .tabbed-content 的同级，因此您需要返回父级 .tabbed-content 然后导航像这样给它的 sibling :

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

我还重构了一些多余的 JS，并通过链接选择器使其更短:

FIDDLE