2

当我们在主菜单中单击另一个选项卡并返回第一个选项卡时，第二个菜单（第二个选项卡）失去其活动状态（没有打开选项卡）

此外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();
    }
  }
});

谢谢

4

1 回答 1

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');
        }
      });
  }
}

在这里试试

于 2019-10-01T08:43:32.593 回答