JavaScript 选项卡仅在存在单个选项卡时才有效

Question

我创建了一个简单的选项卡小部件，这是一个有效的 jsfiddle:http://jsfiddle.net/G3eRn/1/

当我在同一页面中添加另一个选项卡小部件时，“正如您将在示例中看到的那样”，一切都被遗漏了!我真的不知道如何描述它......在查看并尝试调试它之后，我得出结论，它是需要查看的JavaScript，所以我进行了研究，但没有真正找到一个答案会解决它。但是，我发现使用 .each 可能会解决这个问题？所以我确实尝试过但没有用——也许我用错了。

我做错了什么？这是 JS:

//Tabs Navigation
    $('.tabs .tabs-menu a:eq(0)').addClass('active');    
    $('.tabs .tabs-sections .tabs-section:not(:first-child)').hide();
    $('.tabs .tabs-menu a').on('click', function() {
        $('.tabs-menu a').removeClass('active');
        $(this).addClass('active');
        $('.tabs .tabs-sections > .tabs-section:eq(' + $(this).index() + ')').show().siblings().hide();
    });

Answer 1

您必须确保只有当前选项卡组受到影响(使用 .each):

http://jsfiddle.net/G3eRn/2/

//Tabs Navigation
$('.tabs').each(function(){
    var $tabs = $(this);
    $tabs.find('.tabs-menu a:eq(0)').addClass('active');
    $tabs.find('.tabs-sections .tabs-section:not(:first-child)').hide();
    $tabs.find('.tabs-menu a').on('click', function () {
        $tabs.find('.tabs-menu a').removeClass('active');
        $(this).addClass('active');
        $tabs.find('.tabs-sections > .tabs-section:eq(' + $(this).index() + ')').show().siblings().hide();
    });
});

这是一个性能更高的版本:

http://jsfiddle.net/G3eRn/7/

//Tabs Navigation
$('.tabs').each(function(){
    var $tabs = $(this);
    $tabs.find('.tabs-sections .tabs-section:not(:first-child)').hide().end()
         .find('.tabs-menu a').on('click', function () {
             $tabs.find('.tabs-menu a').removeClass('active').end()
             .find('.tabs-sections > .tabs-section:eq(' + $(this).index() + ')').show().siblings().hide();
             $(this).addClass('active');
    }).eq(0).addClass('active');
});

第二个例子使用end()它“撤消”了最后一个选择器。例如

$('.el').find('div').end().addClass('test')

会将类“test”添加到 .el 元素而不是其中的所有 div。