CODEWITHSUNDEEP
jquery
IntricatePixels
IntricatePixels

Reputation: 1229

jquery active class to menu item based on current url

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?

Upvotes: 3

Views: 15817

Answers (4)

Ram
Ram

Reputation: 144669

Try this:

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

Upvotes: 12

kayen
kayen

Reputation: 4868

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.

Upvotes: 0

Sampson
Sampson

Reputation: 268344

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.

Upvotes: 0

The System Restart
The System Restart

Reputation: 2881

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

Upvotes: 3

Related Questions