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 thehashchange
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...