Here’s a common web development scenario: How do we highlight the current page in a navigation seamlessly and dynamically? The answer is jQuery.
See a Live Demo
My recipe for this common scenario involves a mixture of CSS and JavaScript with a dash of jQuery.
HTML
<ul id="navigation">
<li><a href="about-us.html">about us</a></li>
<li><a href="our-products.html">our products</a></li>
<li><a href="blog.html">blog</a></li>
<li><a class="active" href="login.html">login</a></li>
<li><a class="active" href="contact.html">contact</a></li>
</ul>
JavaScript / jQuery
$(function(){
$page = jQuery.url.attr("file");
if(!$page) {
$page = 'index.html';
}
$('#navigation li a').each(function(){
var $href = $(this).attr('href');
if ( ($href == $page) || ($href == '') ) {
$(this).addClass('on');
} else {
$(this).removeClass('on');
}
});
});
Usage
You’ll need a copy of jQuery, along with a copy of the jQuery URL Parser plugin.
After you include jQuery, and the URL Parser add the JavaScript snippet above to the <head> section of your document.
How it works
What we do here is simple, we grab the current name of the page, for example about.html. Then we check out ul.navigation <ul> to see if any of the anchors contain an href attribute with that value. If any of the links are a match we flag the parent of the anchor with a CSS class. In this case I’ve chosen current to keep things self explanatory.
Notes
In this case I chose to add the “current” class to the <li> rather than to the anchor. Usually I will create a navigation using CSS sprite techniques, and this allows me greater control over the presentation of that element. This can come in handy for rounded corners or tabs.
Meet the Author
