Bootstrap Navbar 活动状态切换 Bootstrap（Javascript 相关）答案

【问题标题】：Bootstrap Navbar Active State Switching Bootstrap (Javascript Related)Bootstrap Navbar 活动状态切换 Bootstrap（Javascript 相关）
【发布时间】：2019-11-11 17:21:55
【问题描述】：

我在导航栏导航项上使用 class="active" 和最新版本的引导程序 (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 并找出脚本的解决方案，我将非常感激。

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案1】：

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

另外 - 您可以直接定位活动项以删除活动类 - 无论是 li 还是 a。

如果您想在 a 上保留活动类 - 那么只需更改点击处理程序

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

如果你想要 li 上的活动课程 - 那么如果您想将活动类保留在 a - 那么只需更改点击处理程序

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

【讨论】：

【解决方案2】：

您没有在 jQuery 选择器中引用的类 .nav。

也更新你的 jQuery：

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

示例链接：https://jsfiddle.net/Lb3u9c5d/

【讨论】：