实现多标签页与内容联动切换的最优方案及无法使用forEach的原因

你现有循环绑定逻辑跑不通的根源，是var的作用域特性：

• var声明的变量是函数作用域，不是块级作用域，循环走完之后，所有点击事件回调里读到的i，都是循环结束后的最终值（也就是tabList的长度），不是点击时对应的索引值，所以不管你写2个还是20个标签，点击时的判断逻辑永远匹配不上正确的内容块。

要做到加多少标签都不用反复改JS逻辑，核心思路是解耦标签和内容的硬编码关联，用事件委托减少冗余监听，用统一的状态切换逻辑替代零散判断，具体实现要点：

• 给标签和对应内容块加自定义属性做语义关联，比如标签加data-tab-target标记目标内容的id，内容块加data-tab-content存对应的标记值，再也不用写tab1、tab2、tab3这种重复的类名
• 直接把click监听绑在标签的父级容器上，利用事件冒泡统一处理所有标签的点击，就算加100个标签，也只需要绑定1次事件，不用循环给每个标签单独加监听，减少内存占用
• 每次触发切换时，先把所有标签、所有内容块的激活状态全部清空，再给当前点击的标签、匹配到的对应内容加上激活类，不用写一堆if判断哪个匹配

可以直接复用的通用代码示例：

// 只要DOM结构带对应的data属性，多几个标签完全不用改这段代码
const tabsContainer = document.getElementById('tabs');
const contentContainer = document.getElementById('tab-content');

tabsContainer.addEventListener('click', (e) => {
  // 兼容点击到标签内部子元素的情况，找到最近的标签元素
  const clickedTab = e.target.closest('.tab-item');
  if (!clickedTab) return;

  // 拿到当前标签对应的内容标识
  const targetMark = clickedTab.dataset.tabTarget;

  // 清空所有标签的激活态
  document.querySelectorAll('.tab-item').forEach(tab => tab.classList.remove('active'));
  // 清空所有内容块的激活态
  document.querySelectorAll('[data-tab-content]').forEach(content => content.classList.remove('active'));

  // 给当前标签加激活态
  clickedTab.classList.add('active');
  // 展示对应内容
  document.querySelector(`[data-tab-content="${targetMark}"]`).classList.add('active');
})

配套的公共样式，替代原来重复的tab1/tab2、content1/content2样式：

.tab-item {
  background-color: #eee;
  display: inline-block;
  float: left;
  padding: 8px 16px;
  cursor: pointer;
}
.tab-item.active {
  background-color: blue;
}
[data-tab-content] {
  display: none;
  padding: 16px;
}
[data-tab-content].active {
  display: block;
}

HTML结构只要加标签时补两行带对应data属性的元素就行，不用改任何JS/CSS：

<div id="tabs">
  <div class="tab-item" data-tab-target="page1">Page 1</div>
  <div class="tab-item" data-tab-target="page2">Page 2</div>
  <div class="tab-item" data-tab-target="page3">Page 3</div>
</div>
<div id="tab-content">
  <div data-tab-content="page1" class="active">
    <h1>Page 1 content</h1>
  </div>
  <div data-tab-content="page2">
    <h1>Page 2 content</h1>
  </div>
  <div data-tab-content="page3">
    <h1>Page 3 content</h1>
  </div>
</div>

这里的认知误区主要来自两个点：

• 最早用的DOM查询API是getElementsByTagName，它返回的是HTMLCollection类数组对象，本身没有挂载数组的forEach方法，直接调用就会报错，所以很多人觉得forEach在DOM遍历里用不了。其实只要把类数组转成真数组，比如用Array.from()或者展开运算符[... ]处理之后，就可以正常用forEach。
• 现在主流的document.querySelectorAll()API返回的是NodeList对象，这个对象本身就内置了forEach方法，完全不需要转换类型，直接调用就行。
• 另外要明确：你之前就算把for循环换成forEach，功能也跑不通，因为核心问题是var的作用域泄漏，不是循环方法的问题。只要把循环里的var换成块级作用域的let，不管用哪种循环方式，都能拿到正确的索引值。

内容的提问来源于stack exchange，提问作者Ishan Ahmed