处理单页网站并使用 URL 哈希和 jQuery 维护状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4113397/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Working with single page websites and maintaining state using a URL hash and jQuery
提问by Entity
I'm working on my portfolio, making it entirely jQuery based. So my problem is when you go to a page, then refresh then it will take you to the home page again. So I have two questions, actually.
我正在处理我的投资组合，使其完全基于 jQuery。所以我的问题是当你进入一个页面时，刷新然后它会再次带你到主页。所以我有两个问题，实际上。
- How do you (via jQuery/Javascript) get a "hash code" from the url?
- E.G. I want the bold part of this: http://portfolio.theadamgaskins.com/Portfolio/#graphicsDesign
- How do you change the url in the address bar when you navigate to a new page to contain the hash code for that page?
- E.G. when you go the the graphicsDesign page, the link in the address bar changes to http://portfolio.theadamgaskins.com/Portfolio/#graphicsDesign
- 您如何（通过 jQuery/Javascript）从 url 获取“哈希码”？
- EG我想这个大胆部分：http://portfolio.theadamgaskins.com/Portfolio/ #graphicsDesign
- 当您导航到新页面以包含该页面的哈希码时，如何更改地址栏中的 url？
- EG 当您进入 graphicsDesign 页面时，地址栏中的链接将更改为http://portfolio.theadamgaskins.com/Portfolio/#graphicsDesign
回答by Sam152
You make the anchor point to an internal link like so:
您可以像这样将锚点指向内部链接：
<a href="#graphicsDesign">Graphics</a>
And then simply make jQuery respond to the click event and let the browser follow the internal link naturally. The browser should now have the internal link in it's address bar. You can use the following JavaScript to parse the URLand then load the correct part of the HTML document. You will need to write the code so that the correct content is loaded based off what the browsers internal address is.
然后简单地让 jQuery 响应点击事件，让浏览器自然地跟随内部链接。浏览器现在应该在它的地址栏中有内部链接。您可以使用以下 JavaScript 来解析URL，然后加载 HTML 文档的正确部分。您需要编写代码，以便根据浏览器的内部地址加载正确的内容。
if(window.location.hash === "graphicsDesign" ||
window.location.hash === "somethingElse") {
loadContent(window.location.hash);
}
回答by leppert
The jQuery BBQ ("Back Button & Query") plugin is quite good as well. http://benalman.com/projects/jquery-bbq-plugin/
jQuery BBQ（“后退按钮和查询”）插件也很不错。 http://benalman.com/projects/jquery-bbq-plugin/
回答by Jonas H?gh
Use one of the many history plugins available, e.g. here: http://plugins.jquery.com/project/jquery-history-web-2-0-hashchange-history-remote
使用许多可用的历史插件之一，例如：http: //plugins.jquery.com/project/jquery-history-web-2-0-hashchange-history-remote
回答by hybernaut
This is not the way web sites are usually built, so in a sense you are swimming upstream. It may have seemed the shorter path when you began, but you will probably find that you must do a lot more work as a result of your initial decision.
这不是网站通常的构建方式，因此从某种意义上说，您是在逆流而上。当您开始时，它可能看起来更短，但您可能会发现由于最初的决定，您必须做更多的工作。
That said, be sure to start with all the divs hidden and then display the selected one.
也就是说，一定要从隐藏的所有 div 开始，然后显示选定的 div。
I also recommend Cowboy's BBQ plugin which will help you deal with back button as well as reload: http://benalman.com/projects/jquery-bbq-plugin/
我还推荐 Cowboy's BBQ 插件，它可以帮助您处理后退按钮以及重新加载：http: //benalman.com/projects/jquery-bbq-plugin/
