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.
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');
}
});
});
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**
No other "addClass" methods worked for me when adding a class to an 'a' element on menu except this one:
$(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
$('a').each(function () {
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
}
});
});
This took me four hours to find it.