我正在尝试使我的网站页面无缝加载。如果单击下面某些链接上的页面,您将看到我在说什么。
http://www.ultranoir.com/
http://www.itsmassive.com/
当您单击链接时,它将加载信息,并且/#!/添加到URL。如何添加此功能,以便页面以相同的方式加载?哪里有教程?
这称为hashchange事件。您可以在更改后的值而#!无需重新加载页面,然后可以使用AJAX加载所需的信息。如果您使用的是支持HTML5的新浏览器,则可以使用History.pushState类似的方式更改网址栏。
hashchange
#!
History.pushState
基本上,您可以向链接添加事件,更改URL(使用location.hash或pushState),然后可以通过AJAX加载数据。
location.hash
pushState
这里是一个不错的例子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 }); });