Javascript get current page and add class to an element depending on the URL

Question

I'm using a navigation bar, and I want to have an active class on elements when they're on the element's page.

For instance, I'd need jQuery to check the url of the current page, and if the url is http://supjamess.tumblr.com/, it'd add the class active to the a element .index, http://supjamess.tumblr.com/ask & it'd add the class active to the a element .ask, and so on.

If anyone could provide a code it'd be extremely helpful.

*chose, and his decision is not my fault, thanks for the minus 2. Immature... — Austin
– Austin, Commented Jul 6, 2012 at 22:53
I simply offered my solution to the problem based on the way that I would solve it. I also explained why I opted to use this method in the comments of my answer. You are entitled to your opinion, but that does not mean that I am wrong, nor do I deserve a downvote. — Austin
– Austin, Commented Jul 6, 2012 at 23:00

Brandon - Free Palestine · Accepted Answer · 2012-07-06 01:15:52Z

2

My example requires jQuery:

if ( window.location.pathname == '/' ) {
    var url_class = 'index';
} else {
    // Very first part of the path, so /path/to/url returns 'path'
    var url_class = window.location.pathname.split('/');
    url_class = url_class[1];
}

$('a.' + url_class).addClass('active');

What this basically does, is get the pathname component of the URL (After the domain and before the query string, see here) and then checks to see if it is '/', aka index and manually sets the URL class to 'index'.

Otherwise, it gets the first component of the URL, so /ask returns ask, /questions/bar returns questions, /users/edit/5 returns users, /tagged/layouts returns tagged, etc.

Then jQuery adds the class active to any element with the given class.

edited Jul 6, 2012 at 1:15

answered Jul 6, 2012 at 1:08

Brandon - Free Palestine

16.7k12 gold badges60 silver badges92 bronze badges

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

5 Comments

Ivan Castellanos Over a year ago

You can't use "class" as the name of a variable in Javascript, it thorws an error in most browsers

Brandon - Free Palestine Over a year ago

@IvanCastellanos Yep, fixed it before you commented :)

James Charless Dickinson Over a year ago

I don't get how this works, could you please explain it & how it would work with /ask, /tagged/layouts, etc? @RogueCoder

Brandon - Free Palestine Over a year ago

@JamesCharless Check my post, I've updated it for more detail

Ivan Castellanos Over a year ago

htmlgoodies.com/beyond/css/article.php/3470231/…

Austin · Accepted Answer · 2012-07-06 01:43:19Z

1

switch based off of location.pathname

 if (location.pathname == "/") {
      $("a.index").addClass("active");
 } else if (location.pathname == "ask") {
      $("a.ask").addClass("active");
 }
 ... and so on

additional pages are added with additional else if statements, so the code becomes:

 if (location.pathname == "/") {
      $("a.index").addClass("active");
 } else if (location.pathname == "/ask") {
      $("a.ask").addClass("active");
 } else if (location.pathname == "/tagged/layout") {
      $("a.layout").addClass("active");
 } else if (location.pathname == "/YOUR PATH") { // to add aditional pages, replace CAPS
      $("a.CLASS OF NAV LINK").addClass("active");
 }

You can try out and experiment with javascript on jsfiddle.net, or in your own console (f12 in most browsers)

edited Jul 6, 2012 at 1:43

answered Jul 6, 2012 at 1:10

Austin

6,0542 gold badges26 silver badges24 bronze badges

3 Comments

Austin Over a year ago

True, this is similar to the way that I use to route my URLs in Backbone apps. The benefit is that if I need to have something the same for a directory, I can employ search(), like so: if (location.pathname.search(/^\/admin/ === 0)) { admin section }

James Charless Dickinson Over a year ago

@Austin would you be able to finish this code for me? I'm new to javascript and I don't quite get it. / is a.index, /ask is a.contact, /tagged/themes is a.layouts and that's it. Thank you so much!!

Austin Over a year ago

See the revised answer for clarification

Collectives™ on Stack Overflow

Javascript get current page and add class to an element depending on the URL

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related