基于jQuery锚点的导航

Question

我正在寻找一种在页面之间导航的方法，并在使用jQuery更改锚点时响应事件。 为了说明我的问题，让我演示一个例子：

1. 用户输入一个已加载jQuery的页面，没有jQuery UI或任何其他插件。
2. 在页面加载时，用户将从http://thesite.com/重定向到http://thesite.com/#/ ，无需刷新任何页面。
3. 点击此链接： <a href="#/author/bio">My Bio</a> 。
4. jQuery使用$.ajax()方法加载请求的页面，而不刷新页面。
5. 用户单击浏览器后退按钮，然后转到http://thesite.com/#/ ，无需刷新页面。

在加载页面内容方面我很好。 但是，这是我不知道的：

1. 如果页面加载时未提供，请如何重定向到http://thesite.com/#/ ？
2. 当点击带有锚点分隔符（＃）的链接时，如何在没有刷新的情况下侦听加载页面的请求？
3. 最重要的是，我如何监听浏览器后退/转发请求，知道要加载哪个页面？

对不起，问题是崩溃列表。 如果我的方案不够清楚，那么这里有一个很棒的网站： http ： //grooveshark.com/ 。

感谢您的时间！ 我将慷慨地奖励彻底的答案/评论。

Answer 1

那么你必须在a标签上添加一个onclick。

那么你所要做的就是：

$('a').click(function(){

    window.location.hash = this.href;
    //some load of that url to the page
    return false;

});

要收听哈希更改，您需要一个像这样的插件

Answer 2

首先加载jquery。

准备好改变所有网址的东西

$('a').forEach(function(obj){
   obj.href=obj.href+"#";
});
// on click load 
$('a').click(function(a){
   ajaxLoad(a);

//push to window.history

});