如何確保單擊時只有一個選項卡是彩色的？

Question

我正在嘗試編寫一個函數，當您單擊一個選項卡（使用引導程序創建）時，它會變為金色。 這一點工作正常，但是，我想切換每個選項卡（引導程序）的活動屬性，以便它可以提供漂亮的白色輪廓。 問題是，除非您再次單擊同一個選項卡，否則它會保持白色。 有任何想法嗎？ 謝謝。

這是我迄今為止的工作：

 let timesClicked = 1; let navItems = document.querySelectorAll('.changeColor'); navItems.forEach(item => { item.addEventListener("click", () => { timesClicked++; console.log(timesClicked); let previousItem = item; if (timesClicked % 2 == 0) { item.style.color = "#f0a500"; item.classList.toggle('active'); console.log(item); } else { previousItem.classList.toggle('active'); console.log(previousItem); }; navItems.forEach(otherItem => { if (otherItem !== item) { otherItem.style.color = "#1A1C20"; /* item.addEventListener("click", () => item.classList.toggle('active')); ;*/ }; }); }); })

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <ul class="nav nav-tabs nav-fill justify-content-center mt-3" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link changeColor active" id="mathematics-tab" data-toggle="tab" href="#Mathematics" role="tab" aria-controls="Mathematics" aria-selected="true">Mathematics</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link changeColor black-text-start" id="english-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">English</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link changeColor black-text-start" id="verbal-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Verbal</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link changeColor black-text-start" id="nonverbal-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Nonverbal</a> </li> </ul>

Answer 1

根據你的代碼，我做了以下步驟來糾正它：

1. 單擊前將第一個選項卡設置為默認活動選項卡。
2. 當單擊任何選項卡時，取消激活前一個選項卡，並通過變量previousItem記住這個激活的選項卡（您應該在 forEach(..) 之外聲明這個變量）。

 let navItems = document.querySelectorAll('.changeColor'); let previousItem = navItems[0]; navItems.forEach(item => { item.addEventListener("click", () => { if(previousItem == item)return; item.style.color = "#f0a500"; item.classList.toggle('active'); previousItem.classList.toggle('active'); previousItem.style.color = "#1A1C20"; previousItem = item; }); })

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <ul class="nav nav-tabs nav-fill justify-content-center mt-3" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link changeColor active" id="mathematics-tab" data-toggle="tab" href="#Mathematics" role="tab" aria-controls="Mathematics" aria-selected="true" style="color:#f0a500;">Mathematics</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link changeColor black-text-start" id="english-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">English</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link changeColor black-text-start" id="verbal-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Verbal</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link changeColor black-text-start" id="nonverbal-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Nonverbal</a> </li> </ul>

Answer 2

您的code過於復雜，這可以簡單地使用querySelectorAll和forEach方法完成。

只需從所有nav items刪除active類和color ，然后僅使用Event.target方法僅添加到clicked菜單項

簡化代碼演示：

 let navItems = document.querySelectorAll('.changeColor'); navItems.forEach(item => { item.addEventListener("click", (e) => { navItems.forEach(otherItem => { otherItem.style.color = "#1A1C20"; otherItem.classList.remove('active'); }); e.target.classList.add('active'); e.target.style.color = "#f0a500"; }); })

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <ul class="nav nav-tabs nav-fill justify-content-center mt-3" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link changeColor active" id="mathematics-tab" data-toggle="tab" href="#Mathematics" role="tab" aria-controls="Mathematics" aria-selected="true">Mathematics</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link changeColor black-text-start" id="english-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">English</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link changeColor black-text-start" id="verbal-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Verbal</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link changeColor black-text-start" id="nonverbal-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Nonverbal</a> </li> </ul>

Answer 3

這是我對你的問題的解決方案

let navItem = document.querySelectorAll('.changeColor');
function someFunction({ target }) {
  navItem.forEach((element) => {
    element.style.color = '#1A1C20';
    element.classList.remove('active');
  });
  target.style.color = '#f0a500';
  target.classList.toggle('active');
}
navItem.forEach((element) => {
  element.addEventListener('click', (e) => someFunction(e));
});