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
– kayen, Commented May 15, 2012 at 4:51

Ram · Accepted Answer · 2012-10-31 04:14:12Z

12

Try this:

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

edited Oct 31, 2012 at 4:14

answered May 15, 2012 at 3:00

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ᴍᴀᴛᴛ ʙᴀᴋᴇʀ Over a year ago

This works, however it will break if the URL has a fragment. For example domain.com/folder/#top.

ᴍᴀᴛᴛ ʙᴀᴋᴇʀ Over a year ago

Using pathname instead of href should help.

The System Restart · Accepted Answer · 2012-05-15 03:54:09Z

3

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

answered May 15, 2012 at 3:54

The System Restart

2,88121 silver badges28 bronze badges

Comments

Sampson · Accepted Answer · 2012-05-15 04:07:54Z

0

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.

answered May 15, 2012 at 4:07

Sampson

269k76 gold badges546 silver badges570 bronze badges

Comments

kayen · Accepted Answer · 2012-05-15 04:45:09Z

0

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.

answered May 15, 2012 at 4:45

kayen

4,8683 gold badges21 silver badges20 bronze badges

Collectives™ on Stack Overflow

jquery active class to menu item based on current url

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related