jQuery add class .active on menu

Question

I've got a problem.

I want to add the class "active" on item menu when the relative page is on.

the menu is very simple:

<div class="menu">  <ul> <li><a href="~/link1/">LINK 1</a> <li><a href="~/link2/">LINK 2</a> <li><a href="~/link3/">LINK 3</a> </ul>  </div> 

In jQuery I need to check if the url is www.xyz.com/other/link1/

if it's this one I would like to add a class one the 'a' element of link1.

I'm trying many solutions but nothing work.

Answer 1

Click here for a solution in jsFiddle

What you need is you need to get window.location.pathname as mentioned and then create regexp from it and test it against navigation hrefs.

$(function(){      var url = window.location.pathname,          urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there         // now grab every link from the navigation         $('.menu a').each(function(){             // and test its normalized href against the url pathname regexp             if(urlRegExp.test(this.href.replace(/\/$/,''))){                 $(this).addClass('active');             }         });  }); 

Answer 2

An easier way for me was:

var activeurl = window.location; $('a[href="'+activeurl+'"]').parent('li').addClass('active'); 

because my links go to absolute url, but if your links are relative then you can use:

 window.location**.pathname**