I don't use much javascript in web development unless I absolutely have to. For instance, a situation where the resulting effect would be a clusterfuck of a bloated css. In this case, highlighting a menu link when you are on that current page.

A quick search brings me a few dreaded php solutions, http://www.hicksdesign.co.uk/else/cssnav/ which didn't really suit me at all as it meant I had to assign ids to every single page and pages that I might or might not want to create in the future. This brute force hack does not bode well with the hierarchical approach of http://boot-str.appspot.com/ as it meant bloating the code for no meaningful reason.

Which brings me to http://skyl.org/log/post/skyl/2010/02/remove-links-that-point-to-the-current-page-with-jquery/. Ahh, that looks much better. Except, I'm not going to be needing (or reading) all of that. I'm just going to use that first bit of code, edit it to suit my needs and we have this:

$(function(){
// href ends with the current location
$('.classname[href$='+window.location.pathname+']').addClass("newclassname")
});

This means, when you look within .classname and find that the current page and the anchor tag (href) is the same, you apply another class (newclassname) to it.

Since the menu was already previously assigned to the div class .classname, all I had to do was create a class in css called .newclassname, assign that bit of javascript to a chunk and include it in the plates. I go one step further and add :hover instance to .newclassname so that it changes state when you hover over the current highlighted state.

You can see the resulting effect on http://boot-str.appspot.com/