Simply add the following to your header (don’t forget to include jquery first!).

$(document).ready(function()
  {
    var loc = window.location.toString().split("/")
    loc = loc[loc.length - 1]
    $("#navigation li a[href=\""+loc+"\"]").addClass("selected");
  });

Of course, jquery isn’t really needed to do this. If you prefer to have it done _without_ jquery, here’s a native way of doing things:

   window.onload = function()
   {
     var current_page = window.location.toString().split("/")[window.location.toString().split("/").length - 1]
     var links = document.getElementsByTagName("a");
     for (x in links)
     {
       var link = (links[x].href != undefined) ? links[x].href.toString().split("/")[links[x].href.toString().split("/").length – 1] : ""
       if (link == current_page)
         links[x].className = (links[x].className == "") ? "selected" : links[x].className + " selected"
     }
   }

_Important_: The above code takes use of the .selected class. Simply add the class to your a:hover classes.

#navigation ul li a:hover { color: #ff0; }

Should be written as:

#navigation ul li a:hover, #navigation ul li a.selected { color: #ff0 !important; }

_Don’t Forget!_, this works for menu/links with background images as well.

and that’s all there is to it! Don’t forget to thumb this up and share!

Related posts:

1. Super Tip! How to Create that floating Facebook toolbar at the bottom of the page! Help! I’d like to create a toolbar similar to facebook...
2. How to: Fix OCUpload/One-Click Upload clicking bug in IE7 & IE8 (jquery) Problem: Help! I’m using the OCUpload, or One Click Upload...

Solution: The one-click upload technique uses a trick that sets the file input’s browse button directly in front of your mouse cursor. This is misbehaving in IE7/IE8 due to how they handle CSS, this can be resolved by directly setting the cursor position through javascript instead. You can fix the problem by editting the script and updating the following lines (highlighted in bold):

Somewhere on line 87:

/** Move the input with the mouse to make sure it get clicked! */
container.mousemove(function(e){
   input.css({
       top: e.pageY-container.offset().top+’px’,
       left: e.pageX-container.offset().left-175+’px’
   });
});

Finally, we need to set the margin css property to 0, you can find it somewhere on line 63:

/** File Input */
var input = $(
       ‘<input ‘+
       ‘name=”‘+options.name+’” ‘+
       ‘type=”file” ‘+
       ‘hidefocus=”true” ‘+
     ‘/>’
).css({
     background: ‘#ffffff’,
     position: ‘relative’,
     display: ‘block’,
     marginLeft: 0+’px’,
     opacity: 0
});

That’s it! Hope this helped!

Related posts:

1. Jquery Super Tip! Automatically highlight the links/menu of the current page with 1 line of code One very important usability feature of a website is...