Ao trabalhar com jQuery nas páginas, sabemos o quanto ficou fácil ocultar e mostrar containers, criar abas de navegação e criar conteúdos seletivos. O problema é que como não é carregado uma nova página, nossa url permanece a mesma ao ser passado o link ou colocado em favoritos. Ao visitar novamente o site que utiliza deste recurso, o link o trará ao conteúdo inicial nos containers, e não aquele que ele já havia acessado/preenchido. Para evitar esse tipo de problema podemos ler a hash, parte da url que é tratada somente ‘client side’, ao carregar a página conferir qual o conteúdo está setado para aparecer no estado inicial.

Mão na massa:

Queremos criar um seletor de conteúdo que oculta e mostra as divs conforme a seleção seguindo o html abaixo:

<div id="nav">
  <a href="#conteudo1">Conteúdo 1</a>
  <a href="#conteudo2">Conteúdo 2</a>
  <a href="#conteudo3">Conteúdo 3</a>
</div>
<div id="conteudo1" class="conteudo">Este é conteúdo 1</div>
<div id="conteudo2" class="conteudo">Este é conteúdo 2</div>
<div id="conteudo3" class="conteudo">Este é conteúdo 3</div>

Para fazer este efeito, existem várias formas usando jquery, escolhi uma delas e tratando com a técnica de usar a hash que expliquei em cima. Segue o código:

<script type="text/javascript">
  $(document).ready(function(){
    hash = window.location.hash;
    $(".conteudo").not(hash).hide();
    $("#nav a").click(function(){
      $(".conteudo").slideUp("slow");
      conteudo = $(this).attr("href");
      $(conteudo).slideDown();
    });
  });
</script>

Note que ao carregar ele acessa o atributo window.location.hash que me dá a hash chamada no navegador. Em seguida ele esconde todas as divs de conteúdo, MENOS a que tava na hash com o filtro de seletor not. Deixando então o estado de seleção conforme o link descreve. O “#conteudo1″ da hash é a mesma string que faz a seleção da div “conteudo1″, neste exemplo. Caso você quiser usar classes ou outros operadores jQuery, terá que tratar a string.

Veja a demonstração aqui