CODEWITHSUNDEEP
jquery
None
None

Reputation: 9247

How to set active class on link after redirecting?

So i have this navigation on my header but problem is when i click on link and redirect me to that page it lose active class. Any suggestion?

<nav>
  <div class="menu-topmenu-container">
    <ul id="menu-topmenu" class="menu">
      <li id="whats-on" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-53">
         <a href="#whatson" class="active">What’s On</a>
      </li>
      <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52">
         <a href="visiting-us">Visiting Us</a>
      </li>
      <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-33 current_page_item menu-item-46">
        <a href="collections-research">Collections &amp; Research</a>
      </li>
      <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50">
        <a href="learning">Learning</a>
      </li>
      <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49">
          <a href="get-involved">Get Involved</a>
      </li>
  </ul>
   </div>
</nav>

I tried this but its not working:

$(function(){
  var href=window.location.href;
  $('nav a').each(function(e,i){
    if (href.indexOf($(e).attr('href'))>=0)
    {
      $(e).addClass('active');
    }
  });
});

Upvotes: 0

Views: 4063

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167192

Change e with this, coz e is index.

$(function() {
  var href = window.location.href;
  $('nav a').each(function(e,i) {
    if (href.indexOf($(this).attr('href')) >= 0) {
      $(this).addClass('active');
    }
  });
});

Upvotes: 9

Related Questions