使用单页网站并使用URL哈希和jQuery维护状态

Question

我正在研究我的投资组合，使其完全基于jQuery。所以我的问题是当你去一个页面，然后刷新然后它将再次带你到主页。所以我实际上有两个问题。

1. 你如何（通过jQuery / Javascript）从网址获取“哈希码”？
   1. E.G。我想要大胆的部分：http://portfolio.theadamgaskins.com/Portfolio/ #graphicsDesign
2. 当您导航到新页面以包含该页面的哈希码时，如何更改地址栏中的网址？
   1. E.G。当您进入graphicsDesign页面时，地址栏中的链接将更改为http://portfolio.theadamgaskins.com/Portfolio/#graphicsDesign

Answer 1

您可以将锚点指向内部链接，如下所示：

<a href="#graphicsDesign">Graphics</a>

然后简单地让jQuery响应click事件并让浏览器自然地跟随内部链接。浏览器现在应该在其地址栏中有内部链接。您可以使用以下JavaScript来解析the URL，然后加载HTML文档的正确部分。您需要编写代码，以便根据浏览器内部地址加载正确的内容。

if(window.location.hash === "graphicsDesign" ||
window.location.hash === "somethingElse") {
    loadContent(window.location.hash);
}

Answer 2

jQuery BBQ（“后退按钮和查询”）插件也很不错。 http://benalman.com/projects/jquery-bbq-plugin/

Answer 3

使用众多历史插件之一，例如：在这里：http://plugins.jquery.com/project/jquery-history-web-2-0-hashchange-history-remote

Answer 4

这不是网站通常建立的方式，所以从某种意义上说，你正在上游游泳。当你开始时，这可能似乎是较短的路径，但你可能会发现，由于你的初步决定，你必须做更多的工作。

那就是说，一定要从隐藏的所有div开始，然后显示所选的。

我还推荐Cowboy的BBQ插件，它可以帮助你处理后退按钮以及重新加载：http://benalman.com/projects/jquery-bbq-plugin/