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

发布于 2024-11-19 18:09:38 字数 872 浏览 0 评论 0 原文

我正在尝试向 jQuery AJAX 导航添加历史记录支持,但由于我不太了解 jQuery,所以我不知道该怎么做。以下脚本将当前文档中的 a 替换为另一个文档中的 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);  
};  

});

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

});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

小苏打饼 2024-11-26 18:09:38

尝试使用 History.jsajaxify - 它将使用 HTML5 History API,因此它直接修改 URL,而不是使用哈希 阅读为什么哈希在这里不理想,以及gist 将为您处理链接和 ajax。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文