javascript - 如何确保点击时只有一个标签是彩色的？

Question

我正在尝试编写一个函数，当您单击一个选项卡(使用 Bootstrap 创建)时，它会变为金色。这个位工作正常，但是，我想切换每个选项卡( Bootstrap )的事件属性，以便它可以提供漂亮的白色轮廓。问题是除非您再次单击同一选项卡，否则它会保持白色。有任何想法吗？谢谢。

这是我目前的工作:

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>