使用addEventListener实现Tab切换时无法移除其他元素active-tab类的问题

你的代码问题出在内层循环里——你每次都只对**当前点击的Tab（e.target）**执行移除类操作，根本没处理其他Tab的类，所以旧Tab会一直保留active-tab样式。

修正后的代码如下：

const tabs = document.getElementsByClassName('Tab');

for (let tab = 0; tab < tabs.length; tab++) {
  tabs[tab].addEventListener('click', (e) => {
    // 遍历所有Tab，逐个移除active-tab类
    for (let i = 0; i < tabs.length; i++) {
      tabs[i].classList.remove('active-tab');
    }
    // 给当前点击的Tab添加激活类
    e.target.classList.add('active-tab');
  });
}

优化写法（更简洁） #

如果想让代码可读性更好，可以把HTMLCollection转成数组后用forEach遍历：

const tabs = Array.from(document.getElementsByClassName('Tab'));

tabs.forEach(currentTab => {
  currentTab.addEventListener('click', () => {
    // 清空所有Tab的激活类
    tabs.forEach(tab => tab.classList.remove('active-tab'));
    // 给当前点击的Tab加激活类
    currentTab.classList.add('active-tab');
  });
});

这样修改后，点击某个Tab时，所有Tab的active-tab类都会被移除，只有当前点击的Tab会加上这个类，就能实现唯一激活的下划线效果了。

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