Bootstrap Navbar Active State Switching Bootstrap（Javascript相关）

Question

I use the class="active" on my navbar navigation items with the most current version of bootstrap (4) and it does not switch when I click on the links. I found similar questions to this and tried to make the javascript fit my own code, but it didn't work. Note: These links on my navbar are all on the same page. The goal is to make the clicked on nav-item link active so that the user knows what they're currently viewing on the page.

Here is what my javascript code looks like:

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

Here is what my html navbar code looks like:

 <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>

If someone can look at my html and figure out a solution to for the script, I will be very grateful.

Answer 1

You dont appear to have an ancestor to the nav list with the class of "nav" - also the nav-link li's are what should get the 'active' class - not the 'a' within it.

Also - you can target the active item directly to remove the active class - whether its the li or the a.

if you want to keep the active class on the a - then just change the click handler

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

If you want the active class on the li - then if you want to keep the active class on the a - then just change the click handler

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

Answer 2

You do not have a class .nav which you are referencing in your jQuery selector.

Update your jQuery too:

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

Link to example: https://jsfiddle.net/Lb3u9c5d/