Active 类未更改为引导程序中导航栏的项目

Question

我有一个来自引导程序的导航栏，它应该在导航项或单击时的锚元素上添加活动类，但是在浏览器中检查它时它的状态没有改变，我不明白为什么。

.nav-link {
  color: #FFF;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
}

.nav-link::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: green;
  transition: width .3s;
}

.nav-link:hover::after {
  width: 100%;
}

.navbar-nav>.active>a {
  color: #00cc00;
}

<nav class="navbar navbar-expand-lg navbar-dark " style="background-color: black;">
  <div class="container-fluid">
    <a class="navbar-brand d-lg-none" href="#"><img src="../assets/images/howdy-white.png" style="width:45px; height:45px;" /></a>
    <button class="navbar-toggler shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    <a class="navbar-brand d-none d-lg-block" href="#"><img src="../assets/images/howdy-white.png" style="width:45px; height:45px;" /></a>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">about</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">works</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">contacts</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">services</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

您需要添加一些 JavaScript 事件处理程序，当您单击该链接时将执行一些操作。

如果您使用 jQuery 并使用如图所示的导航栏结构

$("ul.navbar-nav li").on("click", function() {
  $("ul.navbar-nav li").removeClass("active");
  $(this).addClass("active")
})

或者如果您喜欢在 DOM 中使用普通 javascript query SelectorAll

let navbarLink = document.querySelectorAll(".navbar-nav li")

document.addEventListener("click", function(e) {
    for (let x = 0;x < navbarLink.length;x++) {
      navbarLink[x].classList.remove("active")
    }
  
    e.target.closest("li").classList.add("active")
 
})

希望这对您的案例有用。

Answer 2

您应该在锚标记上添加活动类

Answer 3

活动类必须单独处理。默认情况下，Bootstrap 不处理活动类。