Adding history support to simple jQuery AJAX navigation

I am trying to add history support to my jQuery AJAX navigation, but since I don't know jQuery that well, I can't figure out how to do it. The following script replaces a in the current document with a from another document - thereby changing the content of the page. How can I improve the script to support browser history and bookmarks? Thanks.

$(document).ready(function(){
//References  
var loading = $("#loading");  
var container = $("#container");  
var link;  

//Manage click events  
$("a.ajax-links").click(function(e){  
    //prevent default action  
    e.preventDefault();  

    //show the loading bar  
    showLoading();   

    //define the target and get content then load it to container  
    link = $(this).attr("href") + " #content";  
    container.load(link, hideLoading);
});  

//show loading bar  
function showLoading(){  
    loading  
    .css({visibility:"visible"})  
    .css({opacity:"1"})  
    .css({display:"block"})  
    ;  
}  
//hide l开发者_JAVA技巧oading bar  
function hideLoading(){  
    loading.fadeTo(1000, 0);  
};  

});

---

Try History.js with ajaxify - it'll use the HTML5 History API so it modifies the URLs directly rather than using hashes ^{read why hashes aren't ideal here}, and the gist will handle your links and ajax for you.