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() 
{   
            


        

Answer 1

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:

   Home
   Contact

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.