Wie Implementieren der angeforderten benannten Anker Anzeigen mit JQuery / JavaScript / CSS

Question

Die Seite hat einen div-Container, die mehr Inhalte divs hält. Jeder Inhalt div hat einen benannten Anker. Nur einer der Inhalt divs zu einem Zeitpunkt angezeigt wird:

Beispiel:

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

Das gewünschte Verhalten ist, dass wenn jemand die Seite mit einem gültigen benannten Anker in der URL anfordert, die JavaScript / JQuery es sehen und die verschiedenen Anzeigeeigenschaften in geeigneter Weise eingestellt, so dass der Inhalt an den benannten Ankern entsprechenden sichtbar ist.

1. Ist die anfragende URL zur Verfügung JQuery?
2. prüft für benannt in der URL-Anker in der Regel getan früh in $ (document) .ready? ()
3. Sie diese harten rechts in einem bekommen Cross-Browser-Weg?
4. Gibt es eine Bibliothek Routine den Anker von einer URL zum Extrahieren, oder alle ihre eigenen regulären Ausdruck rollt?

Answer 1

Sie können location.hash verwenden Sie den Anker aus der URL abzurufen. Dies wird in allen Browsern funktioniert und in $(document).ready arbeiten.

Zum Beispiel:

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