使用AJAX更改无缝页面

我正在努力使我的网站页面无缝加载。 如果您点击下面某些链接上的页面，您将看到我在说什么。

http://www.ultranoir.com/

http://www.itsmassive.com/

当您点击链接时，它会加载信息并将/＃！/添加到url中。 如何添加此function以使我的页面加载方式相同？ 在任何地方都有教程吗？

Answer 1

这称为hashchange事件。 您可以在#!后更改值#! 在不重新加载页面的情况下，您可以使用AJAX加载所需的信息。 如果您使用的是支持HTML5的新浏览器，则可以使用History.pushState以类似的方式更改url栏。

基本上，您向链接添加事件，更改URL（使用location.hash或pushState ），然后您可以通过AJAX加载数据。

这是location.hash一个不错的例子， 这里是 pushState 的一个例子。

对于一个好的跨浏览器解决方案，我建议使用History.js 。

如果您想使用History.js，在将脚本添加到页面后，您还需要添加一些JavaScript。

 $('a.hash').click(function(e){ // For all links with the class "hash" e.preventDefault(); // Don't follow link History.pushState(null, '', this.href); // Change the current URL (notice the capital "H" in "History") $('#content').slideUp('slow', function(){ // Animate it sliding up var $this = $(this); $this.load(this.href, function(){ // Use AJAX to load the page (or do whatever) $this.slideUp('slow'); // Slide back down }); });