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

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?
1. E.G. I want the bold part of this: http://portfolio.theadamgaskins.com/Portfolio/#graphicsDesign

你如何(通过jQuery / Javascript)从网址获取“哈希码”?例如。我想要这个大胆的部分: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?
1. E.G. when you go the the graphicsDesign page, the link in the address bar changes to http://portfolio.theadamgaskins.com/Portfolio/#graphicsDesign

当您导航到新页面以包含该页面的哈希码时,如何更改地址栏中的URL?例如。当您进入graphicsDesign页面时,地址栏中的链接将更改为http://portfolio.theadamgaskins.com/Portfolio/#graphicsDesign

4 个解决方案

#1

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 URL and 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响应click事件,让浏览器自然地跟随内部链接。浏览器现在应该在其地址栏中有内部链接。您可以使用以下JavaScript来解析URL,然后加载HTML文档的正确部分。您需要编写代码,以便根据浏览器内部地址加载正确的内容。

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

#2

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/

#3

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

#4

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的BBQ插件,它可以帮助你处理后退按钮以及重新加载:http://benalman.com/projects/jquery-bbq-plugin/

#1