Load in and Animate content with JQuery

I found out how to load and animate content using this excellent tutorial from tutsplus.com. But I wanted to take it one step further and also show the currently active link highlighted in the menu bar which took a bit of effort.

The full working sample can be downloaded from here.

Here’s the final version of the javascript:


var hash = window.location.hash.substr(1);
var href = $(‘#nav li a’).each(function(){
var href = $(this).attr(‘href’);
var toLoad = hash+’.html #content’;

$(“.nav li a”).click(function(e){

var toLoad = $(this).attr(‘href’)+’ #content’;

var clickedMenuItem = $(this);//Store whatever you clicked over here

var currentMenuItem = $(this);//This is where you’ll store whatever is currently selected (in the next step)

$(“.nav li a”).each(function(){
currentMenuItem = $(this);//If it is active then set that to the currentMenuItem
return false;//Break out of the each() loop (http://gavinroy.com/jquery-tip-how-to-break-out-of-each)
return true;//Just to get rid of the warning “Function doesn’t always return a value”
//Change animations to slideUp and slideDown to get the sliding animation
$(“#content”).load(toLoad, function(){

window.location.hash = $(this).attr(‘href’).substr(0,$(this).attr(‘href’).length-5);
currentMenuItem.removeClass(“active”);//First remove and then add in case the same link is clicked