De travail avec une seule page web et la conservation de l'état en utilisant une URL de hachage et jQuery

Je suis en train de travailler sur mon portfolio, basé sur jQuery. Donc mon problème est que lorsque vous accédez à une page, puis actualisez ensuite, il faudra vous à la page d'accueil. J'ai donc deux questions, en fait.

  1. Comment faites-vous (via jQuery/Javascript) obtenir un "code de hachage" à partir de l'url?
    1. E. G. je veux le gras: http://portfolio.theadamgaskins.com/Portfolio/#graphicsDesign
  2. Comment changer l'url dans la barre d'adresse lorsque vous accédez à une nouvelle page pour contenir le code de hachage pour cette page?
    1. E. G. lorsque vous allez sur l'graphicsDesign de page, le lien dans la barre d'adresse change à http://portfolio.theadamgaskins.com/Portfolio/#graphicsDesign
Notez également que si vous êtes l'espoir pour Google d'indexer vos pages, vous pouvez vous retrouver avec une seule page l'indexation par Google. Donc, pour les fins de SEO c'est probablement un cauchemar.
solution: asual.com/jquery/address/docs
En réponse à Nathan.. je suis d'accord. Cela va créer un contenu en double, parce que tous les date sur vos pages est le même pour les moteurs de recherche. Des changements en vue sont seulement sur le front-end mais Google indexe tous!

OriginalL'auteur Entity | 2010-11-06

  1. 29

    Vous faites le point d'ancrage d'un lien interne comme suit:

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

    Et puis il suffit de faire jQuery répondre à l'événement click et de laisser le navigateur suivez le lien interne, naturellement. Le navigateur devrait maintenant avoir le lien interne dans la barre d'adresse. Vous pouvez utiliser le code JavaScript suivant pour analyser l'URL puis charger la bonne partie du document HTML. Vous devez écrire le code de sorte que le contenu est chargé en fonction de ce qui les navigateurs adresse interne est.

    if(window.location.hash === "graphicsDesign" ||
window.location.hash === "somethingElse") {
    loadContent(window.location.hash);
}
    Toutes les pages sont contenues dans un document html et jQuery cache tous, sauf un, quand le chargement de la page. J'ai donc besoin pour obtenir le code de hachage en javascript donc je peux dire jQuery, la page à afficher.
    Commencer avec tous les divs cachées et laisser
    Le ~hash === "graphicsDesign" devrait avoir un hachage en face de lui, comme si ~hash === "#graphicsDesign" @Sam152

    OriginalL'auteur

  2. 8

    Le jQuery BARBECUE (Bouton"Retour & Query") plugin est très bien ainsi.
    http://benalman.com/projects/jquery-bbq-plugin/

    OriginalL'auteur

  3. 2

    Utiliser l'un des nombreux de l'histoire des plugins disponibles, par exemple ici: http://plugins.jquery.com/project/jquery-history-web-2-0-hashchange-history-remote

    Il est utilisé plus de sorte que vous pouvez lier à quelqu'un d'autre et le bon contenu sera chargé, pas tant que vous serez en mesure de naviguer d'avant en arrière.
    Il fera aussi de l'arrière et de l'avant boutons fonctionnent comme prévu, et laissez la page se recharge dans l'état correct après un rafraîchissement

    OriginalL'auteur

  4. 0

    Ce n'est pas la manière dont les sites web sont généralement construites, donc dans un sens, vous êtes en train de nager en amont. Il semblait le plus court chemin d'accès lorsque vous avez commencé, mais vous trouverez probablement que vous devez faire beaucoup plus de travail en raison de votre décision initiale.

    Cela dit, assurez-vous de commencer avec tous les divs cachée et puis d'affichage sélectionné.

    Je recommande également de cow-boy pour BARBECUE plugin qui va vous aider à composer avec le retour du bouton de rechargement: http://benalman.com/projects/jquery-bbq-plugin/

    OriginalL'auteur