单击时将活动类添加到导航栏元素

Question

我是用导航栏创建的，我没有做过太多的网络开发。

<nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center">
  <button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2"> <span class="navbar-toggler-icon"></span> </button>
  <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
    <ul class="navbar-nav mx-auto text-center">
      <li class="nav-item"><a class="nav-link" href="index.html"><strong style="text-transform:uppercase">home</strong></a></li>
      <li class="nav-item"><a class="nav-link" href="about.html"><strong style="text-transform:uppercase">about</strong></a></li>
      <li class="nav-item"><a class="nav-link" href="flights.html"><strong>FLIGHTS</strong></a></li>
      <li class="nav-item"><a class="nav-link" href="hotels.html"><strong>HOTELS</strong></a></li>
      <li class="nav-item"><a class="nav-link" href="holidays.html"><strong>HOLIDAYS</strong></a></li>
      <li class="nav-item "><a class="nav-link" href="property.html"><strong>PROPERTY</strong></a></li>
      <li class="nav-item active"><a class="nav-link" href="car_hire.html"><strong>CAR HIRE</strong></a></li>
    </ul>
  </div>
</nav>

此导航栏链接到所有其他页面的顶部，以减少代码重复。有人可以帮我写代码吗，所以当菜单项单击“活动”类时，会将其添加到 li 元素中。然后这会触发 css。

CSS：

.nav-link.active {
  color: white;
}

谢谢

Answer 1

这是纯 JavaScript 中满足您要求的确切完整代码。希望它会有所帮助

const links = document.querySelectorAll('.nav-link');
    
if (links.length) {
  links.forEach((link) => {
    link.addEventListener('click', (e) => {
      links.forEach((link) => {
          link.classList.remove('active');
      });
      e.preventDefault();
      link.classList.add('active');
    });
  });
}

.nav-link.active {
  color: white;
}

<nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center">
  <button
      class="navbar-toggler ml-1"
      type="button"
      data-toggle="collapse"
      data-target="#collapsingNavbar2"
  >
    <span class="navbar-toggler-icon"></span>
  </button>
  <div
    class="navbar-collapse collapse justify-content-between align-items-center w-100"
    id="collapsingNavbar2"
  >
    <ul class="navbar-nav mx-auto text-center">
      <li class="nav-item">
        <a class="nav-link" href="index.html">
          <strong style="text-transform: uppercase">home</strong>
        </a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="about.html">
            <strong style="text-transform: uppercase">about</strong>
          </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="flights.html">
          <strong>FLIGHTS</strong>
        </a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="hotels.html">
            <strong>HOTELS</strong>
          </a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="holidays.html">
            <strong>HOLIDAYS</strong>
          </a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="property.html">
            <strong>PROPERTY</strong>
          </a>
      </li>
      <li class="nav-item active">
          <a class="nav-link" href="car_hire.html">
            <strong>CAR HIRE</strong>
          </a>
      </li>
    </ul>
  </div>
</nav>

Answer 2

使用classList和toggle

document.querySelectorAll(".nav-item").forEach((ele) =>
  ele.addEventListener("click", function (event) {
    event.preventDefault();
    document
      .querySelectorAll(".nav-item")
      .forEach((ele) => ele.classList.remove("active"));
    this.classList.add("active")
  })
);

.active {
  color: green;
}

    <ul class="navbar-nav mx-auto text-center">
      <li class="nav-item"><a class="nav-link" ><strong style="text-transform:uppercase">home</strong></a></li>
      <li class="nav-item"><a class="nav-link" ><strong style="text-transform:uppercase">about</strong></a></li>
      <li class="nav-item"><a class="nav-link" ><strong>FLIGHTS</strong></a></li>
      <li class="nav-item"><a class="nav-link" ><strong>HOTELS</strong></a></li>
      <li class="nav-item"><a class="nav-link" ><strong>HOLIDAYS</strong></a></li>
      <li class="nav-item "><a class="nav-link" ><strong>PROPERTY</strong></a></li>
      <li class="nav-item active"><a class="nav-link" ><strong>CAR HIRE</strong></a></li>
    </ul>

Answer 3

您所要做的就是遍历链接，检查当前点击的链接是否与当前页面相同，然后将活动类和 aria-current 设置为该项目。 将此代码添加到您的 javascript

document.querySelectorAll(".nav-link").forEach((link) => {
    if (link.href === window.location.href) {
        link.classList.add("active");
        link.setAttribute("aria-current", "page");
    }
});

Answer 4

在您的 JS 中添加以下代码：

 $(".nav-item").click(function() {  
    $(".nav-item").removeClass("active"); // This will remove active classes from all <li> tags
    $(this).addClass("active"); // This will add active class in clicked <li>   
  });