如何在单击 javascript 时使用导航栏链接切换活动类

Posted 2023-02-22

【中文标题】如何在单击 javascript 时使用导航栏链接切换活动类

【英文标题】：How to toggle active class with navbar links on click javascript

【发布时间】：2021-10-11 09:16:41

【问题描述】：

我试图在单击时将“li-active”类切换到我的每个导航栏链接 li。此时，在第一次点击后，当前 li-active 类被移除，并将该类带到新点击的 li。伟大的。然而，当单击不同的 li 时，前一个 li 不会删除该类，但新的 li 会获取该类。 我可能忽略了一步..提前谢谢你！

 <li data-id="0" id="mercury" class="navbar__links--li">
              <div class="inner-div">
                <div class="mercury-oval"></div>
                MERCURY
              </div>
              <svg
                class="svg"
                xmlns="http://www.w3.org/2000/svg"
                
                
              >
                <path fill="none" stroke="#FFF" opacity=".4" d="M1 0l4 4-4 4" />
              </svg>
            </li>
            <li data-id="1" id="venus" class="navbar__links--li">
              <div class="inner-div">
                <div class="venus-oval"></div>
                VENUS
              </div>
              <svg
                class="svg"
                xmlns="http://www.w3.org/2000/svg"
                
                
              >
                <path fill="none" stroke="#FFF" opacity=".4" d="M1 0l4 4-4 4" />
              </svg>
            </li>
            <li data-id="2" id="earth" class="navbar__links--li li-active">
              <div class="inner-div">
                <div class="earth-oval"></div>
                EARTH
              </div>
              <svg
                class="svg"
                xmlns="http://www.w3.org/2000/svg"
                
                
              >
                <path fill="none" stroke="#FFF" opacity=".4" d="M1 0l4 4-4 4" />
              </svg>
            </li>
            <li data-id="3" id="mars" class="navbar__links--li">
              <div class="inner-div">
                <div class="mars-oval"></div>
                MARS
              </div>
              <svg
                class="svg"
                xmlns="http://www.w3.org/2000/svg"
                
                
              >
                <path fill="none" stroke="#FFF" opacity=".4" d="M1 0l4 4-4 4" />
              </svg>
            </li>
            <li data-id="4" id="jupiter" class="navbar__links--li">
              <div class="inner-div">
                <div class="jupiter-oval"></div>
                JUPITER
              </div>
              <svg
                class="svg"
                xmlns="http://www.w3.org/2000/svg"
                
                
              >
                <path fill="none" stroke="#FFF" opacity=".4" d="M1 0l4 4-4 4" />
              </svg>
            </li>
            <li data-id="5" id="saturn" class="navbar__links--li">
              <div class="inner-div">
                <div class="saturn-oval"></div>
                SATURN
              </div>
              <svg
                class="svg"
                xmlns="http://www.w3.org/2000/svg"
                
                
              >
                <path fill="none" stroke="#FFF" opacity=".4" d="M1 0l4 4-4 4" />
              </svg>
            </li>
            <li data-id="6" id="uranus" class="navbar__links--li">
              <div class="inner-div">
                <div class="uranus-oval"></div>
                URANUS
              </div>
              <svg
                class="svg"
                xmlns="http://www.w3.org/2000/svg"
                
                
              >
                <path fill="none" stroke="#FFF" opacity=".4" d="M1 0l4 4-4 4" />
              </svg>
            </li>
            <li data-id="7" id="neptune" class="navbar__links--li">
              <div class="inner-div">
                <div class="neptune-oval"></div>
                NEPTUNE
              </div>
              <svg
                class="svg"
                xmlns="http://www.w3.org/2000/svg"
                
                
              >
                <path fill="none" stroke="#FFF" opacity=".4" d="M1 0l4 4-4 4" />
              </svg>
            </li>
          </ul>

.li-active 
  @include desktop 
    border-top: 1px solid red;
  

menuBtn.forEach((li) => 
  li.addEventListener("click", (e) => 
    menuBtn.forEach((el) => el.classList.remove("li-active"));
    e.target.classList.add("li-active");
  );
);

【参考方案1】：

嗯，那是因为您正在将类添加到单击的目标中，该目标可以是任何内部元素。

将其替换为被点击的元素本身 (li.classlist.add)：

let menuBtn = document.querySelectorAll('.navbar__links--li')

    menuBtn.forEach((li) => 
        li.addEventListener("click", (e) => 
            menuBtn.forEach((el) => el.classList.remove("li-active"));
            li.classList.add("li-active");
        );
    );