Como implementar exibindo a âncora nomeada solicitado usando JQuery / JavaScript / CSS

Question

A página tem um div recipiente que contém vários divs conteúdo. Cada div conteúdo tem uma âncora nomeada. Apenas um dos divs conteúdo é exibido de cada vez:

Exemplo:

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

O comportamento desejado é que se alguém solicita a página usando uma âncora nomeada válido no URL, o JavaScript / JQuery vai vê-lo e definir as várias propriedades de visualização de forma adequada para que o conteúdo correspondente à âncora nomeada é visível.

1. O solicitante URL disponível para JQuery?
2. está verificando chamado âncoras no URL geralmente é feito no início de $ (document) .ready? ()
3. É esta difícil acertar em uma maneira cross-browser?
4. Existe uma rotina de biblioteca para extrair a âncora de uma URL, ou faz todo mundo rolo de sua própria expressão regular?

Answer 1

Você pode usar location.hash para recuperar a âncora do URL. Isto irá funcionar em todos os navegadores e vai trabalhar em $(document).ready.

Por exemplo:

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