function setActive() {\n aObj = document.getElementById('nav').getElementsByTagName('a');\n for(i=0;i<aObj.length;i++) {\n if(document.location.href.indexOf(aObj[i].href)>=0) {\n aObj[i].className='active';\n }\n }\n}<\/pre>\nThis function looks for an element with an id of “nav” (presumably your navigation bar), then looks at each of the anchor tags inside it. It then compares the anchor tag’s href tag with the page’s URL. If the href tag is contained within the URL anywhere, it gives that link a class of “active,” which I can then style specially in my CSS.<\/p>\n
As an example of what I mean by all that, if I had an anchor tag in my navigation bar that linked to “\/blog\/” and the page I was on was “\/blog\/this-is-a-post.html”, my blog link would be styled as active, because “\/blog\/” is contained within “\/blog\/this-is-a-post.html”.<\/p>\n
As a final note, you wouldn’t want to call this function until the page was finished loading: if you call it too soon, your links won’t exist yet! So you can either call it at the very end of your document, or dynamically call it when your page is done loading, with something like this:<\/p>\n
window.onload = setActive;<\/pre>\nA jQuery Solution<\/h3>\n
If you are already loading a framework like jQuery (like I do on almost every site I work on these days), this sort of functionality could be written even more succinctly. And like I said earlier, I’m a sucker for efficiency. Here’s a jQuery solution that does essentially the same thing in a much smaller space:<\/p>\n
$(document).ready(function() {\n\t$('#nav a[href^=\"\/' + location.pathname.split(\"\/\")[1] + '\"]').addClass('active');\n});<\/pre>\nThis function is making use of both native JavaScript and jQuery tricks to reach a whole new level of brevity. First, the whole thing is wrapped in a “document ready” function, which means it won’t fire until the page is loaded and our links are in place. Next, we’re looking for anchor tags inside our “nav” ID. And really, we’re looking for a very specific anchor tag: one whose href starts with<\/strong> (^=) a slash, followed by a part of our page’s location<\/strong> (location.pathname). Specifically, we’re looking for the first directory in our page’s URL.<\/p>\nWe’re doing this by making use of the JavaScript split() method, which lets us take any string (for example, “\/blog\/this-is-a-post.html”) and break it into an array based on a substring (in our case, the forward slash). If you’re familiar with PHP, it’s similar to the explode() function. In our example, we’d end up with a three-part array that looked like this: <\/p>\n
[\"\",\"blog\",\"this-is-a-post.html\"]<\/pre>\nWhich means that if we look at the second value of our array (arrays start counting at zero, so [1] is the second value), that should give our first-level directory (“blog”, in our example). This lets us match any subsequent child directories with our parent in the navigation bar.<\/p>\n
Tweaking for Home Links<\/h3>\n
Our jQuery function works great in most scenarios, but it fails if you have a “home” link where you’re just pointing to the root directory, like this:<\/p>\n
<a href="\/">Home<\/a><\/pre>\nAnd because I tend to have a link like that, I needed a workaround. Here’s a way to get around that with just a little more code to account for our special case:<\/p>\n
$(document).ready(function() {\n\tif(location.pathname != \"\/\") {\n\t\t$('#nav a[href^=\"\/' + location.pathname.split(\"\/\")[1] + '\"]').addClass('active');\n\t} else $('#nav a:eq(0)').addClass('active');\n});<\/pre>\nHere, we’re checking to see if we’re in the root directory. If so, we’re skipping the loop through our anchor tags and just making a specific anchor tag active. In this case, I’m giving the active class to the first anchor in our list (which is the most common location for a home link).<\/p>\n
And that’s that. If you know of even more efficient or fool-proof ways to accomplish this task, I’d love to hear about them in the comments section. Or if you’re skilled in a framework other than jQuery, feel free to share the equivalent code!<\/p>\n
Note: I apologize for the long gap between articles. I had some problems while rebuilding my PC (DOA motherboard) and was without my computer for several weeks.<\/p>\n
![\"active](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2009\/04\/active-nav.png\" "\\"active")
<\/p>\n