嵌套Tabs系统

Question

当我们单击主菜单中的另一个选项卡并返回到第一个选项卡时，第二个菜单(第二个选项卡)将失去其活动状态(没有打开选项卡)。

此外，在链接上的状态is-active被删除。

我不知道怎么才能不影响孩子的标签。

下面是一个链接来查看这个问题。

<div class="container js-tabs-container">
    <div class="tabs">
        <ul>
            <li class="is-active" data-tab="tab-1"><a>Link 1</a></li>
            <li data-tab="tab-2"><a>Link 2</a></li>
        </ul>
    </div>

    <div class="js-tab-content" id="tab-1">
        <p>Tab 1</p>

        <!-- Nesting tabs -->
        <div class="container js-tabs-container">
            <div class="tabs">
                <ul>
                    <li class="is-active" data-tab="tab-2-1"><a>Link 2-1</a></li>
                    <li data-tab="tab-2-2"><a>Link 2-2</a></li>
                </ul>
            </div>

            <div class="js-tab-content" id="tab-2-1">
              <p>Tab 2-1</p>
            </div>
            <div class="js-tab-content" id="tab-2-2">
              <p>Tab 2-2</p>
            </div>
        </div>
    </div>

    <div class="js-tab-content" id="tab-2">
        <p>Tab 2</p>
    </div>


</div>

document.addEventListener('DOMContentLoaded', function () {

  var tabs = document.getElementsByClassName('tabs');

  if (tabs) {
    var _loop = function _loop() {
      var tabListItems = tabs[i].querySelectorAll('.tabs-menu-item');
      tabListItems.forEach(function(tabListItem) {

        // création d'un écouteur d'évènements sur le clic d'une tab
        tabListItem.addEventListener('click', function () {

          // suppression de la classe is-active sur chacune des tabs avant de la rajouter sur la tab qui a été cliquée
          tabListItems.forEach(function(tabListItem) {
            tabListItem.classList.remove('is-active');
          });
          tabListItem.classList.add('is-active');

          // tabName correspond à la valeur de l'attribut data-tab
          var tabName = tabListItem.dataset.tab;

          // on identifie tous les contenus possibles puis on applique la classe has-display-none si l'ID du contenu ne correspond pas à la valeur de l'attribut data-tab
          tabListItem.closest('.js-tabs').querySelectorAll('.js-tab-content').forEach(function(tabContent) {
            if (tabContent.id !== tabName) {
              tabContent.classList.add('has-display-none');
            } else {
              tabContent.classList.remove('has-display-none');
            }
          });
        }, false);
      });
    };

    for (var i = 0; i < tabs.length; i++) {
      _loop();
    }
  }
});

谢谢

Answer 1

您遇到的问题是使用querySelectorAll造成的，它不只是选择第一层子节点，而是直接钻入DOM并检索所有匹配的节点。一个简单的解决方案可以是通过添加一个属性来区分子选项卡和父选项卡，并为子选项卡使用单独的处理程序。一种更全面的方法可能只涉及在顶层选项卡和选项卡内容上操作。

CodePen链路

(为了其他用户的可读性，我在代码中添加了英文注释，并删除了外文注释)

'use strict';

document.addEventListener('DOMContentLoaded', function () {

  var tabs = document.getElementsByClassName('tabs');
  if (tabs) {
    var _loop = function _loop() {
      var tabListItems = tabs[i].querySelectorAll('li');

      tabListItems.forEach(function (tabListItem) {

        tabListItem.addEventListener('click', function (e) {

          // Select any siblings of the current tab.
          let siblings = Array.from(tabListItem.parentElement.children);

          // Remove the is-active status from all siblings
          siblings.forEach(function (element) {
            element.classList.remove('is-active');
          });

          // Add the is-active status to the selected tab.
          tabListItem.classList.add('is-active');

          var tabName = tabListItem.dataset.tab;

          // Same as above, rather than selecting all of the js-tab-content
          // elements, we only select those which are at the same level as
          // the selected tab.
          let tabsContainer = tabListItem.closest('.js-tabs-container');
          let tabsContainerChildren = Array.from(tabsContainer.children);

          // Filter out other children that aren't js-tab-content elements.
          let tabs = tabsContainerChildren.filter(function(el) {
            return el.className.includes('js-tab-content')
          });

          tabs.forEach(function(tabContent) {
            if (tabContent.id !== tabName) {
              tabContent.classList.add('has-display-none');
            } else {
              tabContent.classList.remove('has-display-none');
            }
          })

        }, false);
      });
    };

    for (var i = 0; i < tabs.length; i++) {
      _loop();
    }
  }
});

假设您的结构大致相同，那么对于任何级别的嵌套选项卡，这都应该正确操作，因为在选择选项卡时，唯一受影响的项是其周围的屏幕和链接。

重构

使用箭头函数，并在不需要的地方分配更少的变量，将允许您编写更短、更简洁的代码。这里有一个示例，并不一定是编写它的最佳方式，但它可能会给您一些提取函数和链接数组迭代的想法。

document.addEventListener('DOMContentLoaded', () => {
  Array.from(document.getElementsByClassName('tabs')).forEach(tab => {
    tab.querySelectorAll('li').forEach(listItem => {
      listItem.addEventListener('click', tabClickHandler(listItem), false);
    });
  });
});

function tabClickHandler (listItem) {
  return () => {
    let siblings = Array.from(listItem.parentElement.children);

    siblings.forEach(el => el.classList.remove('is-active'));
    listItem.classList.add('is-active');

    let tabName = listItem.dataset.tab;

    Array.from(listItem.closest('.js-tabs-container').children)
      .filter(el => el.classList.contains('js-tab-content'))
      .forEach(tab => {
        if (tab.id !== tabName) {
          tab.classList.add('has-display-none');
        } else {
          tab.classList.remove('has-display-none');
        }
      });
  }
}

在这里试试