Bootstrap Menu Change Li Active Class On Click

I have the following menu by bootstrap HTML

• Solution 1:

  UPDATED

  Your css selectors seems to be wrong. Please try as given below,

  <script>
      $(".nav li").on("click", function() {
        $(".nav li").removeClass("active");
        $(this).addClass("active");
      });
  
  </script>

  I have created a plunkr for this here

  Solution 2:

  Try this:

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

  You will have to play around with it with your given tags. What helped me was declaring this to become active, then removing the active class.

  Solution 3:

  one of your selectors is malformed, by looking at your html it looks like on the third line of the script that selector isn't doing what I think you want it to.

  $("#homeL, #workL").click(function(){
  
    //$(".nav navbar-nav li") <-this is looking for a <li> inside a <navbar-nav>  // tag inside a tag with the class "nav"
  
    $(".nav.navbar-nav li").removeClass("active");
    $(this).addClass("active");
  });
  

  Solution 4:

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

  This is the solution that worked for me. I declared this to become active and remove the active class and also adding the .siblings() method that allows you to search for the siblings of the li elements in the document.

  Solution 5:

  Include this script

  <scripttype="text/javascript">
      $(function(){
          $('.nav a').filter(function(){
              returnthis.href==location.href}).parent().addClass('active').siblings().removeClass('active');
  
          $('.nav a').click(function(){
              $(this).parent().addClass('active').siblings().removeClass('active')    
              });
          });
  </script>

Share