基于 jQuery 锚点的导航

Question

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

1. 用户进入一个已加载 jQuery 的页面，没有 jQuery UI 或任何其他插件。
2. 页面加载时，用户会从 http://thesite.com/ 重定向到 http://thesite.com/#/，无需任何页面刷新。
3. 单击如下链接：我的简历。
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

});