Question

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

当我添加另一个Tabs小部件＆＃34;正如您将在示例中看到的那样＃34;在同一页面，一切都错过了！我真的不知道如何描述它...在研究并尝试调试之后，我得出结论，需要关注的是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。

Answer 2

您需要将函数应用于每个.tabs元素。

$('.tabs').each(function() {
    var $tabs = $(this);

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

语法jQuery( 'selector', node )仅在给定的HTML元素节点内选择子元素。在这种情况下，一个元素具有类.tabs。这类似于jQuery( node ).find( 'selector' )。

使用$只是让我始终知道哪个变量是jQuery对象的一种方式。例如：var $this = jQuery( this );。

如果您希望脚本中的更高性能存储变量中的所选节点（例如代码中的.tabs-menu a）。您甚至可以querySelector通过普通JS而不是jQuery来获取元素。另一方面，jQuery each非常舒服。

不同方法的示例混合：

$('.tabs').each(function() {
    var tabs = this,
    links = this.querySelectorAll( '.tabs-menu a' );

    /* passing a DOMNodeList to jQuery and filter it */
    $(links).filter(':eq(0)', tabs).addClass('active');    
    $('.tabs-sections .tabs-section:not(:first-child)', tabs).hide();

    /* setup event handler */

    /* without jQuery, one need to itererate over the list of elements */
    for( var i = links.length; i--; ) {
        var currentLink = links[i];
        currentLink.addEventListener('click', function() {
            var currentTab = this;

            /* jQuery does the loop internally */
            $(links).removeClass('active');
            currentTab.classList.add('active');

            $('.tabs-sections > .tabs-section:eq(' + $(currentTab).index() + ')', tabs).show().siblings().hide();
        }, false);
    }
});

有关文档和浏览器支持，请参阅此处：

几乎所有现代功能都有一个JS ployfill：

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Answer 3

在你的＆＃34;点击＆＃34;处理程序，您必须确保仅将更改应用于相关的选项卡组。当您的代码当前已编写时，处理程序代码将影响页面上匹配的选项卡组的 all 。

您可以使用jQuery DOM导航方法来执行此操作：

$('.tabs .tabs-menu a:eq(0)').addClass('active');
$('.tabs .tabs-sections .tabs-section:not(:first-child)').hide();

$('.tabs .tabs-menu a').on('click', function () {
    // find the current menu group and deactivate all tab labels
    $(this).closest('.tabs-menu').find('a').removeClass('active');
    // activate this tab
    $(this).addClass('active');
    // find the tab section corresponding to this tab menu
    $(this).closest('.tabs').find('.tabs-sections > .tabs-section:eq(' + $(this).index() + ')').show().siblings().hide();
});

.closest()方法遍历DOM寻找匹配项。从那时起，.find()看起来 down 该孤立子树中的DOM。

Here's your fiddle, updated.

我个人使用委托处理程序设置，以便可以动态添加选项卡组，而无需重新运行代码：

$('body').on('click', '.tabs-menu a', function() {
  // as above
});

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

3 个答案: