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