Andrew Turn

Are you having trouble getting Jquery to set the active state class for your navigation? I’m in the middle of building a site and thought hey, here’s a chance to see how easy it would be to use Jquery to set the active state navigation for the main navigation on my website. I’m not a Jquery Guru but it is so much simpler to use than plain old JavaScript. I set out to see how or what I could do to interact with DOM and add the class based on what page I was on. I went to the Jquery website and the example they had for creating this was outdated according to everything else I read. Their example can be found here http://docs.jquery.com/Tutorials:Auto-Selecting_Navigation. It was a great tutorial as it did get me pointed into the right direction. The problem with this is that the @ xpath selector has been deprecated from the current version of Jquery. So what’s the fix or what did I do to solve the problem? After a couple of hours of research I finally found the darn solution because even though I simply removed the @ from the code, My creation was still not working correctly.

Here is the code I started with

$(function(){ if (location.pathname.substring(1))
  $('#sidebar_content a[@href$="' + location.pathname.substring(1) + '"]')
    .attr('class', 'selected')
});

The thought behind this code is that will search the DOM Location and if the page name is included at the end of the location Jquery would add the “selected” class to that part of the navigation. As I was saying previously, I removed the @ and still, the code was not working. Finally, I added the entire location that DOM was giving and it worked. Okay Great right? Not yet. After a couple more hours I found this snippet of code which was what I needed for success.

var path = document.location.protocol + "//" + window.location.hostname + window.location.pathname;
$("#nav a[href=" +  window.location + "], #nav a[href=" + path + "]").addClass("selected");

And after a couple of tweeks to the code, I came up with this that actually added and removed the class depending on what page I was on.

$("#nav a").each(function() {
if(this.href == window.location || this.href == document.location.protocol + "//" + window.location.hostname + window.location.pathname)
     $(this).removeClass("navOff");
	 $(this).addClass("selected");
});

This works so long as you set the home page to have it’s own class because I’m not quite sure how to force the class on the index.html page if you are at www.SomeURL.com with no file name as opposed to www.SomeURL.com/index.html . I’m quite sure there are tons of way to accomplish this and it may be very easy so comments are quite welcome as to how I can force JavaScript / Jquery to see the top level domain location as index.html and add the class.

I wrote this mostly for my own reference but I also know that if I could have found a post like this, it would have saved me a ton of time. Hope this helps at least one person

This entry was posted on Thursday, September 10th, 2009 at 10:13 am and is filed under Web Design, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.