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

Answer 1

您所要做的就是循环遍历链接，检查当前单击的链接是否与当前页面相同，然后将 active class 和 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 2

这里是纯 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 3

使用

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 4

我要疯了

<script>
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');
    });
  });
}
</script>

适用于班级更改，但链接不起作用

Answer 5

//active nav bar

//getting the link
const fullLink = window.location.pathname;
//isolating the page name
const activeLink = fullLink.split('/').pop().replace('.html', '');
//passing the page name through the function
function setActiveClass(elementId) {
    //getting the element that has the id of the page name
    const element = document.getElementById(elementId);
    //checking if the element is valid
    if (element) {
        //adding class active to the element
        element.classList.add('active');
    }
}
//function getting called when page refresh of change of page and passing through the page name
setActiveClass(activeLink);

Answer 6

在你的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>   
  });