Active class not working

Question

My nav menu with index is given "active" class. What I want is to set "active" when I click other <li> elements. But it switches back to index.php . What I mean is: it's not setting "active" class to other <li> nor removing from "home".

Below is what I have tried using jQuery, but its not working.
What's going wrong?

 $('.nav').on('click', 'li', function() { $('.nav li.active').removeClass('active'); $(this).addClass('active'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown active"> <a href="index.php">Home</a> </li> <li class="dropdown"> <a href="aboutus.php">About</a> </li> <li class="dropdown"> <a href="services.php">Services</a> </li> <li class="dropdown"> <a href="contact.php">Contact</a> </li> </ul> </div> 

Answer 1

When you click the link in the li, it takes you to the page in the href attribute and loads it (or reloads the current page), wiping out any changes you've made with javascript.

I think javascript might not be exactly what you're looking for here. I see you're using php, so I would recommend using that to keep track of which page the user is on instead. With php, if this list is included on all pages you'd want to do something like this at the top of each page:

<?php $pageName = "index"; ?> // aboutus, services etc.

Then down in your li's add something like this:

<li class="dropdown <?php if (pageName === "index") echo "active"; ?>">
    <a href="index.php">Home</a>
</li>
<li class="dropdown  <?php if (pageName === "aboutus") echo "active"; ?>">
    <a href="aboutus.php">About</a>
</li>

If you were recreating this list manually on each page (not recommended), you'd rewrite each page like this:

Home Page

<li class="dropdown active">
    <a href="index.php">Home</a>
</li>
<li class="dropdown">
    <a href="aboutus.php">About</a>
</li>

About Us page

<li class="dropdown">
    <a href="index.php">Home</a>
</li>
<li class="dropdown active">
    <a href="aboutus.php">About</a>
</li>

etc.

Answer 2

Your code is setting and removing the active class as it should. The problem is that as soon as you click a link, you navigate away from the page.

If your goal is to "remember" what was the last clicked link when you return to the page you need to store that in a persistent medium. localStorage is simple to use and would do the trick.

But, you have your click event set up on your li elements and those li elements contain a elements, which is redundant. Instead, just set the click on the a elements.

 $(function(){ // When the document is ready, get the last active link (if any) var lastActive = localStorage.getItem("lastClicked"); // Set that element as the active element $("a[href='" + lastActive + "']").addClass("active"); $('.nav').on('click', 'a', function(e){ $('.nav li.active').removeClass('active'); $(this).addClass('active'); // Set the clicked link's href value into localStorage localStorage.setItem("lastClicked", this.getAttribute("href")); }); }); 

 .active { background:#ff0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown active"> <a href="index.php">Home</a> </li> <li class="dropdown"> <a href="aboutus.php">About</a> </li> <li class="dropdown"> <a href="services.php">Services</a> </li> <li class="dropdown"> <a href="contact.php">Contact</a> </li> </ul> </div> 

Keep in mind that this code will not work, here in the Stack Overflow code snippet environment due to security restrictions, but it will work in your environment.