Organizar o conteúdo do website utilizando abas é uma solução elegante e conveniente. Ajuda a tornar a página mais organizada deixando o visual mais leve e objetivo.

Neste tutorial será criada uma navegação em abas utilizando CSS e jQuery. Vamos utilizar todo a potência dos seletores para simplificar o código.

Concepção Do Menu Em Abas

Quando uma itens das abas for clicada, o script pegara o valor contido na propriedade href dele e vai encontrar uma div na página que tenha o mesmo valor para sua id. O conteúdo desta div será então inserido dentro da div responsável por mostrar as informações e a aba clicada ficara de cor diferente para informar que esta ativa.

Como você deve ter percebido o conteúdo já estará presente na página, mas oculto. Outra possibilidade é carregar os textos via requisições AJAX.

Estrutura Da Página

Como de praxe, os itens do menu-aba são criados utilizando lista. Encaixa-se logo abaixo a div que apresentará a informação, uma div para englobar todos os textos e as divs respectivas de cada texto com o mesmo valor de id definido que o href de cada link.

Formatação

São retirados os marcadores padrão para itens da lista e criado um recuo para o conteúdo.

Em seguida os itens da lista são posicionados à esquerda neutralizando o comportamento padrão que é nível de bloco. Bordas são aplicadas criando os delimitadores, somente a de baixo é retirada. É aplicada margem e efeitos CSS 3 que funcionarão somente no Firefox e Chrome-Safari.

Quando o mouse passar sobre o item, um efeito de sombra aliado à fonte negritada destaca o item. E a borda é escurecida para criar definição. Alguns deste efeitos somente funcionam nos navegadores modernos. Seja pelo efeitos CSS 3 ou pelo estado :hover em um item de lista ao invés de um link.

A classe “ativo” formata o item clicado e informa ao usuário qual das abas ele esta vendo. E o link do item também é afetado.

Continuando, definimos o posicionamento e dimensão da div que recebe a notícia, o espaçamento interno, borda e sombra.

Por fim são ocultadas qualquer div dentro de “#notícia”. Se você voltar à estrutura verá que não existe div dentro de “#noticia”. Mas vamos inserir através do javascript.

Iniciando O Script

Sendo que utilizaremos jQuery, no cabeçalho do arquivo HTML, importe a biblioteca e também o arquivo que criaremos.

Já no arquivo, a primeira linha servirá para esconder as divs do conteúdo. Por que não fazer isso através do CSS? Se o javascript não estiver habilitado o conteúdo será mostrado mesmo assim. Se fosse escondido com CSS e mostrado somente com javascript, o conteúdo não ficaria visível neste caso.

Lendo O Hash

Em uma url, o que vier depois do sinal “#” é considerada a parte hash. Ela aparece quando utilizamos ancoras para navegar dentro do próprio documento. No caso das abas criadas, clique na primeira aba e observe que na barra de endereço aparece no final da url, “#noticia1”.

Alguém visitou a nossa página e considerou interessante a notícia da terceira aba e decidiu compartilhar o endereço. Quem receber a dica e tentar acessar a página verá a primeira aba e não a terceira como deveria ser. Este é um problema comum quando utilizamos o javascript para ocultar conteúdo. Vejamos como resolver.


var noticia;
var hash = window.location.hash;
if (hash !='')
{
noticia = $(hash).html(); // se for passado index.htm#noticia3 ela devolve #noticia3
$('.abas li a[href="' + hash + '"]').parent().addClass('ativo');
}


O javascript disponibiliza de uma propriedade específica para capturar a parte hash da url que é depositada na variável “hash”.

Na linha de baixo é feita uma verificação para saber se a variável recebeu algum valor. Pois isso somente ira acontecer se a url passada já tiver uma aba como alvo.

Se a “hash” não estiver vazio, a variável “noticia” receberá o conteúdo HTML do elemento na página que tiver a id com o valor igual ao da “hash”.

Sendo assim, se a url for “index.htm#noticia2”, ao carregar a página, a variável “noticia” recebera o que estiver contido dentro da div com id “#noticia2”. O que inclui textos e marcação.

Como é necessário mudar a aparência do item da aba que foi “clicado”, na linha seguinte é feita a seleção do elemento. Ele procura pelo elemento com a classe “.abas” que tenha um item de lista englobando um link com o valor da propriedade href “#noticia2”. Encontrando o elemento, olha para o elemento-pai deste e adiciona a classe “ativo”.

Sem hash

Se a página for acessada normalmente, o conteúdo da primeira aba deve aparecer.

Se a variável “hash” estiver vazia significa que a url é somente para a página então “noticia” recebe o conteúdo da primeira div existente após a abertura da div “#conteudo”. Assim como o primeiro item da aba recebe a classe “ativo”.

Até o momento, a notícia não esta visível na tela.

Para que fique visível, é anexada à div “#noticia” o conteúdo da variável “noticia” englobado por uma div. Isso é útil para facilitar a criação da animação. Estamos encadeando as ações, então após anexar o conteúdo, o script acha (find) dentro da div “#noticia” uma div, que foi inserida agora, e mostra ela com um efeito deslizante.

Escolhendo A Aba

Definimos o que acontece quando um dos links da aba for clicado.

Primeiro ele remove a classe “ativo” de todos os itens. Em seguida ele seleciona o elemento-pai (parent) do link clicado e adiciona a classe “ativo”. A variável “ancora” recebe o valor da propriedade href deste link e na linha seguinte é dividida para tirar o “#” da frente do nome.

A variável “noticia” recebe então o conteúdo da div que possuir o id igual ao valor do href do item clicado sem o sinal “#”. A div “noticia” é esvaziada e é inserido novo conteúdo. No final o return false evita que ao clicar no link a página role para o topo.

Conclusão

Apesar da abundância de plugins disponíveis para trabalhar com abas, desenvolver uma solução própria é a melhor opção. Você ganha controle sobre o comportamento, aprende e tem um arquivo extremamente leve.

Faça testes com este que criamos e divida seus resultados connosco.

Download do código utilizado neste tutorial: Navegação Em Abas Com CSS E jQuery