-
Book Overview & Buying
-
Table Of Contents
jQuery for Designers: Beginner's Guide
By :
We've already made our asynchronous navigation much better than our simple example, but I think we can keep going and make it even better. Next up, we're going to highlight the page currently being viewed in the navigation to make it easy for our site visitors to see which page they're on.

First up, let's open up styles.css again and write a .current CSS class for the navigation:
#ajax-nav li.current{ background:#a3bb00; }I've made my navigation bar green, so I'm going to make the .current class a slightly lighter shade of green so that the current item is highlighted in the menu. You can follow my example or create your own style—whatever suits your taste.
Now we just need to apply our .current class to the current navigation item. We're going to add a few lines to the hashchange event function we wrote earlier. We'll start by checking to see if there's a hash in the window location:
$(document).ready(function(){
$('#ajax-nav...
Change the font size
Change margin width
Change background colour