jQuery hashchange該怎麼辦？

Question

我做了一個jQuery的東西;將會在不刷新頁面的情況下加載內容。該代碼是：

$(document).ready(function(){ 
// initial 
$('#content').load('content/index.php'); 

// handle menu clicks 
$('#navBar ul li ').click(function(){ 
var page = $(this).children('a').attr('href'); 
$('#content').load('content/'+ page +'.php'); 
return false; 
}); 
}); 

現在我想有一個排序的歷史的東西，對於該代碼是：

(function(){ 
// Bind an event to window.onhashchange that, when the hash changes, gets the 
// hash and adds the class "selected" to any matching nav link. 
$(window).hashchange(function(){ 
var hash = location.hash; 
// Set the page title based on the hash. 
document.title = 'The hash is ' + (hash.replace(/^#/, '') || 'blank') + '.'; 
// Iterate over all nav links, setting the "selected" class as-appropriate. 
$('#nav a').each(function(){ 
var that = $(this); 
that[ that.attr('href') === hash ? 'addClass' : 'removeClass' ]('selected'); 
}); 
}) 
// Since the event is only triggered when the hash changes, we need to trigger 
// the event now, to handle the hash the page may have loaded with. 
$(window).hashchange(); 
}); 

上找到：http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/

我的問題是：我如何使第二個代碼與第一個代碼一起工作？

Answer 1

要實現緩存，你可以做類似

$('#content').load('content/index.php'); 
//create a cache object 
var cache = {}; 
// handle menu clicks 
$('#navBar ul li ').click(function(){ 
    var page = $(this).children('a').attr('href'); 
    //check if the page was already requested 
    if(cache[page] === undefined){ 
    //if not fetch the page from the server 
    $.get('content/'+ page +'.php', function(data){ 
     $('#content').html(data); 
     //save data in cache 
     cache[page] = data; 
    }else{ 
    //use data from cache 
    $('#content').html(cache[page]); 
    } 
    return false; 
}); 

Answer 2

使用History JS。它適用於HTML5 pushState，也可以回退到HTML 4主題標籤。還可以在頁面刷新時保持狀態模型。

Answer 3

既然你還沒有得到答案，我會寫它。您需要運行代碼的插件jQuery hashchange。

https://github.com/cowboy/jquery-hashchange