CSS Tricks 的 Chris 有一个很棒的 AJAX 页面加载教程,关于他的解决方案操作系统最好的一点是它仍然适用于不支持 JavaScript 的旧浏览器。
脚本
<script type="text/javascript">
/*
* Your navigation bar, can be "document" or body if you want to
* apply to every link on your site
*/
var $navigation = $("#site-menu");
//Your main content that will be replaces
var body = "#page-body";
var $body = $(body);
$navigation.delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function() {
var newHash = window.location.hash.substring(1);
if(newHash) {
$body.fadeOut(200, function() {
$body.hide().load(newHash + " " + body, function() {
$body.fadeIn(200, function() {
});
});
});
};
});
$(window).trigger('hashchange');
</script>
菜单
像往常一样添加您的菜单,确保添加站点菜单 id 一些标签,该标签包含您想要 ajax 加载的菜单链接。
<div id="site-menu">
<?php wp_nav_menu(); ?>
</div>
细节
$navigation 下的所有链接都将添加一个单击事件,该事件将更新窗口 url 哈希。该窗口正在侦听哈希更改,并将使用哈希值发出 AJAX 请求以重新加载 $body html。
优势
- 历史(后退和前进)导航将起作用:
- 同一个站点将适用于支持 JavaScript 的浏览器和不支持 JavaScript 的浏览器;
- 如果您复制过去的 url,脚本将加载正确的页面;
- 因为我们使用的是委托函数,所以通过 ajax 加载结果添加的任何链接也将添加点击事件
坏处
有关更多信息和示例,请参阅:http ://css-tricks.com/video-screencasts/85-best-practices-dynamic-content/