JavaScript选项卡仅在存在单个选项卡时工作

我创建了一个简单的tabs小部件，下面是一个正在工作的JSFIDLE：

当我添加另一个Tabs小部件时，您将在同一页面的示例中看到，所有内容都会丢失！我真的不知道怎么形容它。。。在研究它并尝试调试它之后，我得出结论，需要研究的是JavaScript，所以我进行了研究，但没有找到解决它的答案。然而，我发现使用。每个都可以修复它吗？所以我试过了，但没用——也许我用错了

我做错了什么？ 以下是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();
    });

---

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

语法jQuery“selector”节点仅选择给定HTML元素节点内的子元素。在本例中，是一个具有class.tabs的元素。这类似于执行jQuery节点。查找“选择器”

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

如果您想在脚本中获得更高的性能，请将所选节点存储在变量中，例如代码中的选项卡菜单a。您甚至可以使用querySelector通过普通JS而不是jQuery来获取元素。另一方面，jQuery非常舒适

不同方法的混合示例：

$('.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：

---

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

语法jQuery“selector”节点仅选择给定HTML元素节点内的子元素。在本例中，是一个具有class.tabs的元素。这类似于执行jQuery节点。查找“选择器”

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

如果您想在脚本中获得更高的性能，请将所选节点存储在变量中，例如代码中的选项卡菜单a。您甚至可以使用querySelector通过普通JS而不是jQuery来获取元素。另一方面，jQuery非常舒适

不同方法的混合示例：

$('.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：

---

在单击处理程序中，必须确保仅将更改应用于相关选项卡组。当前编写代码时，处理程序代码将影响页面上所有匹配的选项卡组

您可以使用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在那个孤立的子树中查找DOM

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

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

---

在单击处理程序中，必须确保仅将更改应用于相关选项卡组。当前编写代码时，处理程序代码将影响页面上所有匹配的选项卡组

您可以使用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在那个孤立的子树中查找DOM

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

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

---

您必须确保只有当前选项卡组受以下各项的影响：

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

第二个示例使用的是撤消最后一个选择器的。 比如说

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

---

将类测试添加到.el元素，而不是其中的所有div。

您必须确保只有当前选项卡组受使用的影响。每个：

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

第二个示例使用的是撤消最后一个选择器的。 比如说

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

---

将类测试添加到.el元素而不是其中的所有div。

@Leo浏览器控制台中出现了什么错误？@Leo如果我将该代码粘贴到JSFIDLE中，选项卡工作正常：问题在单击处理程序的最后一行。只需删除选择器开头的.tabs即可修复it@Leo您在浏览器控制台中遇到了什么错误？@Leo如果我将代码粘贴到您的JSFIDLE中，选项卡工作正常：问题在单击处理程序的最后一行。只需删除选择器开头的.tabs，就可以修复它的问题，但是div都显示为default@Leo你看过我挂的小提琴了吗？这里发布的代码不包括小提琴的前两行。他们仍然很重要！请在这里更新它，因为我只是用旧代码尝试了一下，但没有work@Leo好的，从小提琴上粘贴了两行。它起作用了，但是div都显示为default@Leo你看过我挂的小提琴了吗？这里发布的代码不包括小提琴的前两行。他们仍然很重要！请在这里更新，

---

因为我只是用旧代码尝试了一下，但是没有work@Leo好的，把小提琴上的两行线粘在一起。你能把它粘在这里吗？所以我可以比较它并选择它作为答案？我可以问一下，什么是。结束？为什么在.eq0.addClass'active'.end.end中有两个，这是因为我很快就把它复制到了；我在答案中添加了结束的解释。谢谢你的解释！我试着做你在这里做的事来修复另一个手风琴标签！但我失败得很惨！我做的和你在这里做的一模一样，非常相似，但不起作用：请你给我看看你做了什么？为什么不使用另一个示例呢？您只是忘记了包含jquery。现在只有一个。在所有的手风琴组中都可以看到手风琴的身体。如果要允许每个组使用一个，则需要更改click事件处理程序的第一行。是否可以将其粘贴到此处？所以我可以比较它并选择它作为答案？我可以问一下，什么是。结束？为什么在.eq0.addClass'active'.end.end中有两个，这是因为我很快就把它复制到了；我在答案中添加了结束的解释。谢谢你的解释！我试着做你在这里做的事来修复另一个手风琴标签！但我失败得很惨！我做的和你在这里做的一模一样，非常相似，但不起作用：请你给我看看你做了什么？为什么不使用另一个示例呢？您只是忘记了包含jquery。现在只有一个。在所有的手风琴组中都可以看到手风琴的身体。如果要允许每个组一个，则需要更改click事件处理程序的第一行。