jquery active class to menu item based on current url

Question

I have the following code that should add an active css class to the menu item if menu item url == current url:

$("#accordion a").each(function() 
{   
    if (this.href.search(window.location.hostname) != -1)
    {
        $(this).addClass("active-sidebar-link");
    }
});

but this adds the class to all the menu items. any tips?

`window.location.hostname` would return you the page hostname i.e. `stackoverflow.com`. You should instead use `location.href` or `location.pathname` to get the correct match. — kayen, May 15 '12 at 04:51

Ram · Accepted Answer · 2012-10-31T04:14:12.613

12

Try this:

$("#accordion a").each(function() {   
    if (this.href == window.location.href) {
        $(this).addClass("active-sidebar-link");
    }
});

edited Oct 31 '12 at 04:14

answered May 15 '12 at 03:00

Ram

143,282
16
168
197

This works, however it will break if the URL has a fragment. For example `domain.com/folder/#top`. – ᴍᴀᴛᴛ ʙᴀᴋᴇʀ Apr 01 '16 at 13:31
Using `pathname` instead of `href` should help. – ᴍᴀᴛᴛ ʙᴀᴋᴇʀ Apr 01 '16 at 13:40

score 3 · Answer 2 · answered May 15 '12 at 03:54

3

$('#accordion a[href="'+ window.location.hostname +'"]').addClass('active-sidebar-link');

answered May 15 '12 at 03:54

The System Restart

2,873
19
28

score 0 · Answer 3 · answered May 15 '12 at 04:07

If you want to do this with jQuery, you can:

$("#accordion a").addClass(function(){
  return this.href === window.location 
    ? "active-sidebar-link" 
    : "" ;
});

However, there's a far better way to style current-page links. This generally involves given the body element a classname that corresponds to your links:

<body class="home">
   <a class="home" href="foo.html">Home</a>
   <a class="contact" href="bar.html">Contact</a>
</body>

In this case, you would select the active link styles like this:

body.home a.home,
body.contact a.contact {
  color: green;
}

This method doesn't require JavaScript to set the initial styles, which is always good.

score 0 · Answer 4 · answered May 15 '12 at 04:45

Use a filter function:

$("#accordion a")
.filter(function(){ 
    return location.href.match($(this).attr("href"))
})
.addClass("active-sidebar-link");

Returns only filtered elements, which in this case would be the link with the current URL and adds the class active-sidebar-link to it.

jquery active class to menu item based on current url

4 Answers4

Linked