Automatically Highlight Current Page in Navigation with CSS & jQuery

It’s common that we want to highlight the current page in navigation to tell users where they are now, and it’s very easy to do it with CSS. Just by adding a class “highlight” to < li > tag and write the style we want in stylesheet. Let’s start it with a simple page:

HTML markup
<ul class="navigation">
<li><a href="index.html">Home</a></li>
<li class="highlight"><a href="product.html">Product</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
Style Sheet
<style type="text/css">
a, a:visited{color:#000; font-weight:bold; text-decoration:none;}
ul.navigation{list-style:none; font: 0.75em/1.5em normal Tahoma, Verdana, Geneva, sans-serif;}
ul.navigation li{ background:#ececec; margin:1px;padding:5px 15px; display:block; float:left;}
ul.navigation li.highlight{ background:#666;}
ul.navigation li.highlight a{ color:#f5f5f5; cursor:default;}

Then, we will get a page look like this:

screenshot of highlight navigation

However, we have to change class “highlight” position in each page in order to show the highlight link correctly. It’s not convenient when we have a complicated navigation, and how about when we have to write php/asp templates or .net masterpages? Can we use exactly same html code in each page but highlight the navigation link automatically? The answer is YES. Few lines of jQuery code will simply does the trick. Let’s still paly with this simple page to explain the idea.