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 can follow my example or create your own style—whatever suits your taste.

  2. 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 a').each(function(){
$(this).attr('href', '#' + $(this).attr('href'));
});
$(window).bind('hashchange', function(e) {
var url = e.fragment;
$('#main-col').load(url + ' #main-col-wrap'),
if (url) {
// The code if there is a hash
} else {
// The code if there is not a hash
}
});
$(window).trigger('hashchange'),
});
  3. Now, if there is a hash, then we want to find the link in my main navigation that corresponds to the hash, find its parent container, and add the current class. That sounds like a lot, but I can do that in one line:
    $(window).bind('hashchange', function(e) {
var url = e.fragment;
$('#main-col').load(url + ' #main-col-wrap'),
$('#ajax-nav li.current').removeClass('current'),
if (url) {
$('#ajax-nav a[href="#' + url + '"]').parents('li').addClass('current'),
} else {
// The code if there is not a hash
}
});

    I'm using jQuery's powerful attribute selectors to select the link with the href attribute equal to the window's hash. Then I'm using the parents() method to get the link's parents. I'm passing li to the parents() method to tell jQuery I'm only interested in one parent, the <li> that contains my link. Then I'm using the addClass() method to add my current class to the current link.

  4. If there isn't a hash, then I want to highlight the home page, which is the first page in our main navigation. I'll select the first<li> and add the current class as shown in the following code:
    $(window).bind('hashchange', function(e) {
var url = e.fragment;
$('#main-col').load(url + ' #main-col-wrap'),
$('#ajax-nav li.current').removeClass('current'),
if (url) {
$('#ajax-nav a[href="#' + url + '"]').parents('li').addClass('current'),
} else {
$('#ajax-nav li:first-child').addClass('current'),
}
});
  5. Now, if you refresh the page in the browser and click through the pages, you'll see that the current page is highlighted, but as you move through the site, more and more of the navigation is highlighted — we're not removing the old highlight before adding a new one. We'll add this line to remove the current highlight before adding a new one:
    $(window).bind('hashchange', function(e) {
var url = e.fragment;
$('#main-col').load(url + ' #main-col-wrap'),
$('#ajax-nav li.current').removeClass('current'),
if (url) {
$('#ajax-nav a[href="#' + url + '"]').parents('li').addClass('current'),
} else {
$('#ajax-nav li:first-child').addClass('current'),
}
});

Refresh the page in the browser and you'll see that the highlight is now working as it should, highlighting only the current page.

What just happened?

We added a few lines of code to our hashchange function to add a highlight to the current page in the navigation. This will help the site visitor orient themselves on the site and further enforce their current location.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.17.184.90