使用单个页面网站并使用URL哈希和jQuery维护状态 [英] Working with single page websites and maintaining state using a URL hash and jQuery

问题描述

我正在处理我的投资组合，完全基于jQuery。所以我的问题是，当你去一个页面，然后刷新，然后它会带你到主页了。所以我有两个问题，实际上。

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

   
   

   
   

   解决方案

   >图形和LT; / A>
   

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

     if（window .location.hash ===graphicsDesign|| 
    window.location.hash ===somethingElse）{
    loadContent（window.location.hash）; 
   } 
     

   
   

   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.

   1. 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

   2. 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

   解决方案

   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.

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

   这篇关于使用单个页面网站并使用URL哈希和jQuery维护状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！