时间戳

首页 > 解决方案 > 如何在单击 javascript 时使用导航栏链接切换活动类

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

问题描述

我试图在单击时将“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"
                width="6"
                height="8"
              >
                <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"
                width="6"
                height="8"
              >
                <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"
                width="6"
                height="8"
              >
                <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"
                width="6"
                height="8"
              >
                <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"
                width="6"
                height="8"
              >
                <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"
                width="6"
                height="8"
              >
                <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"
                width="6"
                height="8"
              >
                <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"
                width="6"
                height="8"
              >
                <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");
  });
});

在此处输入图像描述

标签： javascripthtmlcss

解决方案

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

将其替换为单击的元素本身 ( 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");
        });
    });

推荐阅读