Come implementare la visualizzazione del ancoraggio con nome richiesto utilizzando jQuery / Javascript / CSS

Question

La pagina ha un div contenitore che detiene più div contenuti. Ogni div contenuto ha un ancoraggio con nome. Solo viene visualizzato uno dei div di contenuto alla volta:

Esempio:

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

Il comportamento desiderato è che se qualcuno richiede la pagina utilizzando un nome di ancoraggio valida nell'URL, il JavaScript / JQuery lo vedranno e impostare le varie proprietà di visualizzazione in modo appropriato in modo che il contenuto corrispondente alla ancoraggio con nome è visibile.

1. è l'URL che richiede a disposizione JQuery?
2. è il controllo per nome ancore nell'URL si realizza presto $ (document) .ready? ()
3. è questo difficile da ottenere in un modo cross-browser?
4. C'è una routine di libreria per estrarre l'ancora da un URL, o se ognuno tira la propria espressione regolare?

Answer 1

È possibile utilizzare location.hash per recuperare l'ancora dalla URL. Ciò funzionerà tutti i browser e lavorerà in $(document).ready.

Ad esempio:

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