How to set active class to menu item (sessionStorage)

Question

I have code like this:

<ul class="nav navbar-nav navbar-right">
    <li><a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-close-others="true">Some <i class="fa fa-caret-down" aria-hidden="true"></i></a>
       <ul class="dropdown-menu">
          <li><a href="">Some 1</a></li>
          <li><a href="">Some 2</a></li>
          <li><a href="">Some 3</a></li>
          <li><a href="">Some 4</a></li>
      </ul>
  </li>
  <li><a href="">News</a></li>
</ul>

And JS code

$(document).ready(function () {

    $(".nav  li a ").click(function () {
    var id = $(this);

    $(".nav li a").removeClass("active");
    $(id).addClass("active");
    sessionStorage .setItem("mylink", $(id).text());
   });

    var mylink = sessionStorage .getItem('mylink');

    if (mylink !== null) {

       $("li:contains('" + mylink + "')").addClass("active");
     }
});

I'm trying to achieve that, when I click an on the item in my nav adds “active” class. Can somebody help me with this?

Answer 1

The logic to set the class and the sessionStorage value works fine. The issue you have is because when the page loads you put the active class on the li instead of the a . As such the call to $(".nav li a").removeClass("active") does nothing. To fix that change this line:

$("li:contains('" + mylink + "')").addClass("active");

To

$("li a:contains('" + mylink + "')").addClass("active");

Working example

Answer 2

You should add a as part of the selector:

Change

$("li:contains('" + mylink + "')").addClass("active");

To:

$("li a:contains('" + mylink + "')").addClass("active");

Demo:

 $(document).ready(function () { var mylink = 'Some 2'; if (mylink !== null) { var el = $("li a:contains('" + mylink + "')"); el.addClass("active"); el.parent().addClass("active"); } }); 

 .active{ font-weight: bold; color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="nav navbar-nav navbar-right"> <li><a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-close-others="true">Some <i class="fa fa-caret-down" aria-hidden="true"></i></a> <ul class="dropdown-menu"> <li><a href="">Some 1</a></li> <li><a href="">Some 2</a></li> <li><a href="">Some 3</a></li> <li><a href="">Some 4</a></li> </ul> </li> <li><a href="">News</a></li> </ul> 

Answer 3

 $(document).ready(function () { $(".nav li a").click(function(){ var id = $(this); $(".nav li a").removeClass("active"); $(id).addClass("active"); sessionStorage .setItem("mylink", $(id).text()); }); var mylink = sessionStorage .getItem('mylink'); if (mylink !== null) { $("li a:contains('" + mylink + "')").addClass("active"); } }); 

 .active { background-color:red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="nav navbar-nav navbar-right"> <li><a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-close-others="true">Some <i class="fa fa-caret-down" aria-hidden="true"></i></a> <ul class="dropdown-menu"> <li><a href="">Some 1</a></li> <li><a href="">Some 2</a></li> <li><a href="">Some 3</a></li> <li><a href="">Some 4</a></li> </ul> </li> <li><a href="">News</a></li> </ul>