Comment mettre en œuvre l'affichage de l'ancre nommée demandé en utilisant JQuery / JavaScript / CSS

Question

La page a un conteneur div qui contient plusieurs divs de contenu. Chaque div de contenu a une ancre nommée. Un seul des contenu divs est affiché à un moment:

Exemple:

<style>
  .lurk { display: none; }
</style>
<div class="container">
  <div id="c1">
    <a name="#c1">One</a> is the loneliest number.
  </div>
  <div id="c2" class="lurk">
    <a name="#c2">Two</a> is company.
  </div>
  <div id="c3" class="lurk">
    <a name="#c3">Three</a> is a crowd.
  </div>
</div>
<script>
// ... something that adds and removes the lurk class from the content divs
</script>

Le comportement souhaité est que si quelqu'un demande la page en utilisant une ancre nommée valable dans l'URL, le JavaScript / JQuery verra et définir les différentes propriétés d'affichage de manière appropriée afin que le contenu correspondant à l'ancre nommée est visible.

1. L'URL demandant à la disposition JQuery?
2. vérifie named ancres dans l'URL habituellement fait au début de $ (document) .ready? ()
3. Est ce difficile à obtenir dans un droit croix multidirectionnelle navigateur?
4. Y at-il une routine de bibliothèque pour extraire l'ancre à partir d'une URL, ou que tout le monde roule leur propre expression régulière?

Answer 1

Vous pouvez utiliser location.hash pour récupérer l'ancre à partir de l'URL. Cela fonctionne sur les navigateurs et travaillera en $(document).ready.

Par exemple:

$("div.container > div").removeClass("lurk");
if (location.hash)
    $("#" + location.hash).addClass("lurk");