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");
    });
});