使用forEach方法实现可点击文本标签页遇阻，求解决方案

你的代码里有两个关键问题：

1. 不该移除文本元素的text类——这是你用来选择元素的标识，删了之后后续操作根本找不到这些文本；而且控制显示隐藏应该用专门的类（比如active或hidden），不是删掉原有类。
2. 没把点击的按钮和对应的文本关联起来，缺少显示对应内容的逻辑。

以下是修正后的完整代码：

HTML #

给文本块加个默认隐藏的类（比如hidden），默认让第一个文本显示：

<button class="button active">Tab1</button>
<button class="button">Tab2</button>
<button class="button">Tab3</button>

<div class="text-tabs">
  <div class="text">
    <h4>Text from tab1</h4>
  </div>

  <div class="text hidden">
    <h4>Text from tab2</h4>
  </div>

  <div class="text hidden">
    <h4>Text from tab3</h4>
  </div>
</div>

CSS #

明确控制显示隐藏的样式：

.button {
  padding: 8px 16px;
  cursor: pointer;
}
.button.active {
  background: #2196F3;
  color: white;
}
.text.hidden {
  display: none;
}
.text {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #eee;
}

JavaScript #

利用forEach的第二个参数index关联按钮和对应文本，点击时精准切换：

const buttons = document.querySelectorAll('.button');
const texts = document.querySelectorAll('.text');

buttons.forEach((button, index) => {
  button.addEventListener('click', () => {
    // 重置所有按钮的active状态
    buttons.forEach(btn => btn.classList.remove('active'));
    // 给当前点击的按钮加active
    button.classList.add('active');

    // 重置所有文本的显示状态
    texts.forEach(text => text.classList.add('hidden'));
    // 显示对应索引的文本
    texts[index].classList.remove('hidden');
  });
});

核心逻辑说明：

• 遍历按钮时拿到每个按钮的index，这个索引和文本数组的索引一一对应（Tab1对应第一个文本，Tab2对应第二个，以此类推）
• 点击按钮时，先把所有按钮的active类去掉，当前按钮加上；再把所有文本隐藏，只显示对应索引的文本

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