Cómo implementar mostrando el anclaje con nombre solicitado usando jQuery / JavaScript / CSS

Question

La página tiene un div contenedor que contiene varias Div de contenido. Cada div contenido tiene un anclaje con nombre. Sólo uno de los divs contenido se muestra a la vez:

Ejemplo:

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

El comportamiento deseado es que si alguien solicita la página utilizando un anclaje con nombre válido en la URL, el código JavaScript / jQuery lo verá, ajustar las distintas propiedades de la pantalla de manera adecuada para que el contenido correspondiente al anclaje con nombre es visible.

1. ¿Es la URL que solicita a disposición JQuery?
2. es la comprobación de llamada anclas en la URL realizan generalmente temprano en $ (document) ready? ()
3. ¿Es esto es difícil de conseguir justo en una camino entre navegadores?
4. ¿Hay una rutina de biblioteca para extraer el ancla desde una URL o no rodar a todo el mundo su propia expresión regular?

Answer 1

Puede utilizar location.hash para recuperar el ancla de la URL. Esto funciona en todos los navegadores y trabajará en $(document).ready.

Por ejemplo:

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