为简单的jQuery AJAX导航添加历史记录支持

时间:2011-07-13 15:30:06

标签: jquery ajax bookmarks browser-history

我正在尝试为我的jQuery AJAX导航添加历史支持,但由于我不了解jQuery,我无法弄清楚如何做到这一点。以下脚本使用另一个文档替换当前文档中的a - 从而更改页面的内容。如何改进脚本以支持浏览器历史记录和书签?感谢。

$(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 loading bar  
function hideLoading(){  
    loading.fadeTo(1000, 0);  
};  

});

1 个答案:

答案 0 :(得分:4)

使用History.js尝试ajaxify - 它将使用HTML5历史记录API,因此它会直接修改网址而不是使用哈希 read why hashes aren't ideal here ,以及要点将为您处理您的链接和ajax。