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

问题描述：

我正在处理我的投资组合，使其完全基于 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/Javascript)从 url 获取哈希码"?

How do you (via jQuery/Javascript) get a "hash code" from the url?

E.G.我想要粗体部分:http://portfolio.theadamgaskins.com/Portfolio/#graphicsDesign

导航到新页面以包含该页面的哈希代码时，如何更改地址栏中的 url?

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.当您转到 graphicsDesign 页面时，地址栏中的链接将更改为 http://portfolio.theadamgaskins.com/Portfolio/#graphicsDesign

答

您可以像这样将锚点指向内部链接:

You make the anchor point to an internal link like so:

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

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

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.

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

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

相关推荐