Javascript addEventListener 仅将 class 添加到一个元素

Question

我正在尝试创建一个类似选项卡的系统，当您单击选项卡时，它会从其他选项卡中删除类并将它们添加到单击的 class

这是代码

JS：

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

for (let tab=0; tab < tabs.length; tab++){
  tabs[tab].addEventListener('click', (e)=>{
    for (let tab=0; tab < tabs.length; tab++){
      e.target.classList.remove('active-tab')
    }
    e.target.classList.add('active-tab')
  })
}

css：

.active-tab {
  border-bottom: 10px solid pink;
}

它实际上是添加 class 并添加粉红色下划线，但它不会删除其他类，因此所有选项卡都可以有下划线

例子：

错误

Answer 1

看起来它没有删除任何类的原因是因为您正在使用e.target.classList.remove('active-tab')从单击的元素/选项卡中删除 class 。 您正在遍历元素/选项卡，但实际上并未选择其中任何一个。

因此，您可能想使用tabs[tab].classList.remove('active-tab')之类的东西。

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

for (let tab=0; tab < tabs.length; tab++){
  tabs[tab].addEventListener('click', (e)=>{
    for (let tab=0; tab < tabs.length; tab++){
      tabs[tab].classList.remove('active-tab')
    }
    e.target.classList.add('active-tab')
  })
}

为了避免带有元素/数组列表的for循环，这里有另一种方法来做同样的事情

document.querySelectorAll('.Tab').forEach(el => {
    el.addEventListener("click", e => {
        document.querySelectorAll("active-tab").forEach(t => {
            t.classList.remove("active-tab");
        });
        e.target.classList.add("active-tab");
    });
});