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.

Answer 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)