JavaScript点击事件触发时如何在forEach循环内移除active类

错误原因 #

你现有代码的点击事件逻辑中，只操作了当前绑定事件的单个元素的类名，没有遍历全部.link-block a元素统一清除active类，因此激活状态无法正确全局切换。

修正后的JS代码 #

只需要调整点击事件内的逻辑，在给当前点击元素添加激活类之前，先遍历所有链接统一清除active类即可：

const texts = document.querySelectorAll('.content p > span');
const links = document.querySelectorAll('.link-block a');
links.forEach(el => {
  el.addEventListener('click', e => {
    // 可选：阻止锚点默认跳转行为，避免页面滚动
    e.preventDefault();
    // 隐藏所有文本内容
    texts.forEach(text => text.classList.add('hidden'));
    // 清除全部链接的active类
    links.forEach(link => link.classList.remove('active'));
    const id = e.target.getAttribute('href');
    // 给当前点击的链接添加active类
    e.target.classList.add('active');
    // 显示对应ID的文本内容
    document.querySelector(id).classList.remove('hidden');
  }); 
});

其他CSS和HTML代码不需要修改，调整后即可实现点击链接切换对应内容、同时只有当前点击链接保留激活样式的效果。

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