javascript - Bootstrap Navbar Active State Switching Bootstrap (Javascript相关)

Question

我在我的导航栏导航项上使用 class="active"和最新版本的 bootstrap (4)，当我点击链接时它不会切换。我发现了与此类似的问题，并尝试使 javascript 适合我自己的代码，但没有用。注意:我的导航栏上的这些链接都在同一页面上。目标是使点击的导航项链接处于事件状态，以便用户知道他们当前在页面上查看的内容。

这是我的 javascript 代码的样子:

$(".nav .nav-link").on("click", function(){
    $(".nav").find(".active").removeClass("active");
    $(this).addClass("active");
});

这是我的 html 导航栏代码的样子:

<header>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <img class="logo" src="images/logo.png" width="55px" align="left">
      <a class="navbar-brand" href="index.html">ROWAN AEΠ</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
      <!--Div for Alignment Purposes Below -->
      <div class="navig-align">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link active" href="#HOME">HOME</a>
          </li>
            <li class="nav-item">
              <a class="nav-link" href="#ABOUT">ABOUT</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">BOARD</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">RECRUITMENT</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">FAQ</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">CONTACT</a>
            </li>
            <li class="nav-item">
              <a id="donatebutton" class="nav-link" href="http://www.example.org" target="_blank">DONATE
              <img class="donateimg" src="images/externallink.png" alt=""></a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

  </header>

如果有人可以查看我的 html 并找出脚本的解决方案，我将不胜感激。

Answer 1

您似乎没有带有“nav”类的导航列表的祖先 - 导航链接 li 应该获得“事件”类 - 而不是其中的“a”。

此外 - 您可以直接将事件项作为目标以删除事件类 - 无论是 li 还是 a。

如果你想在 a 上保留事件类 - 那么只需更改点击处理程序

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

如果你想要 li 上的 active class - 那么 如果你想在 a 上保留事件类 - 那么只需更改点击处理程序

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