如何避免选项卡内容脚本中的嵌套forEach循环？能否仅用一个？

原实现代码 #

JavaScript #

(function() {
  let contentElms = document.querySelectorAll('.content > div');
  let tabs = document.querySelectorAll('.tabs li');

  // Show first tab initially
  contentElms[0].classList.add("active");
  tabs.forEach((tab, index) => {
    tab.addEventListener("click", () => {
      // Toggle tabs
      tabs.forEach((tab) => {
        tab.classList.remove("active")
      });
      tab.classList.add("active");

      // Toggle content
      contentElms.forEach((el) => {
        el.classList.remove("active")
      });

      contentElms[index].classList.add("active");
    });
  });
})();

CSS #

body {
     margin: 0;
     padding: 0;
     font-family: Arial, Helvetica, sans-serif;
}
 body * {
     box-sizing: content-box;
}
 .tabbed-content {
     max-width: 600px;
     margin: 10px auto;
}
 .tabbed-content .tabs ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     display: flex;
}
 .tabbed-content .tabs ul li {
     flex: 1;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 4px 4px 0 0;
     overflow: hidden;
}
 .tabbed-content .tabs ul li.active {
     border-bottom: none;
     font-weight: bold;
}
 .tabbed-content .tabs ul a {
     display: block;
     padding: 10px;
     text-align: center;
     text-decoration: none;
     color: #7f7f7f;
}
 .tabbed-content .content {
     padding: 10px;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-top: none;
     border-radius: 0 0 4px 4px;
}
 .tabbed-content .content > div {
     font-size: 14px;
     line-height: 1.5;
     text-align: justify;
     display: none;
}
 .tabbed-content .content > div.active {
     display: block;
}

HTML #

<div class="tabbed-content">
  <nav class="tabs">
    <ul>
      <li class="active"><a href="#">Tab 1</a></li>
      <li><a href="#">Tab 2</a></li>
      <li><a href="#">Tab 3</a></li>
    </ul>
  </nav>
  <div class="content">
    <div>Nesciunt velit a hic, officia animi veritatis quis obcaecati tempora omnis iusto.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias dolorem, sequi quos unde tempora corporis voluptatibus officia atque voluptatum consequuntur necessitatibus fuga quidem nihil. Perspiciatis reiciendis impedit cupiditate odit veritatis!</div>
    <div>Deserunt est in, ipsum possimus dolorum! Numquam suscipit laborum, reiciendis delectus. Labore?</div>
  </div>
</div>

问题与疑问 #

原脚本功能正常，但存在嵌套的forEach循环，希望优化：

1. 是否有可靠的方法避免嵌套forEach循环？
2. 能否让脚本中仅存在一个forEach循环？

优化方案 #

1. 避免嵌套forEach的可靠方法 #

核心思路是直接定位当前激活的元素，而非遍历整个集合移除active类。每次点击时，只需要找到当前带有active类的tab和内容元素，直接移除类名即可，完全不需要循环。

优化后的JavaScript代码：

(function() {
  let contentElms = document.querySelectorAll('.content > div');
  let tabs = document.querySelectorAll('.tabs li');

  // 初始显示第一个tab内容
  contentElms[0].classList.add("active");

  tabs.forEach((tab, index) => {
    tab.addEventListener("click", () => {
      // 移除当前激活tab的active类
      const activeTab = document.querySelector('.tabs li.active');
      if (activeTab) activeTab.classList.remove("active");
      tab.classList.add("active");

      // 移除当前激活内容的active类
      const activeContent = document.querySelector('.content > div.active');
      if (activeContent) activeContent.classList.remove("active");
      contentElms[index].classList.add("active");
    });
  });
})();

2. 实现仅含一个forEach的脚本 #

上面的优化方案已经满足要求——整个脚本仅在绑定点击事件时使用了一次forEach，点击处理逻辑中没有任何循环。这种写法既简洁高效，也完全符合你的需求。

内容的提问来源于stack exchange，提问作者Razvan Zamfir