Time for action – highlighting the current page in the Navigation

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.

Time for action – highlighting the current page in the Navigation
  1. 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 ...

Get jQuery for Designers Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial