Javascript 使用AJAX实现无缝页面更改

我试图让我的网站页面无缝加载。如果你在下面的一些链接上点击一个页面，你就会看到我在说什么

---

单击链接时，它会加载信息和/#！/已添加到url。如何添加此功能以使我的页面以相同的方式加载？任何地方都有教程吗？

这称为

hashchange

事件。您可以在

#之后更改值History.pushState

以类似方式更改url栏

基本上，您可以向链接添加事件，更改URL（使用

location.hash

或

pushState

），然后通过AJAX加载数据

是

location.hash

的一个很好的例子，一个用于

pushState

对于一个好的跨浏览器解决方案，我建议

如果您想使用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
       });
});

---

查看一下，或者.history.js似乎是最好的选择。我是从history.js的作者那里了解到这一点的，但对如何实现有点困惑。。我包括了脚本，但不确定是否还有其他需要做的事情。@Joebbby：添加脚本后，您需要向页面添加一些JavaScript，使其使用

History.js

。我会在我的答案中添加一个例子。我把它放在脑海中，并在导航链接中添加了。hash，但我不确定它是否有效。。我怎么知道？@joebby：打开一个JavaScript控制台（比如FireBug或Chrome的内置控制台），看看整个页面是否刷新，或者是否触发了AJAX调用。您还可以添加一些动画（如

slideUp

和

slideDown

）以查看它是否正常工作。@Joebby:这是未经测试的，只是我很快组合起来的东西。：-P