jQuery Tabs
Postado por: Pedro Rogério em
Quer desenvolver um sistema de tabs (abas) mas não quer fazer isso com JavaScript puro? Então utilize jQuery. Existem hoje várias formas de se criar tabs com jQuery, deixo aqui uma das soluções.
Antes de tudo, vamos ao nosso HTML:
<div class="box">
<ul>
<li class="active">Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="content">
<div>
<h2>Tab 1</h2>
</div>
<div>
<h2>Tab 2</h2>
</div>
</div>
</div>
Como podem ver, não existe muito segredo no HTML, pois a coisa começa mesmo a ficar interessante no JavaScript:
$(function () {
$('.box').each(function() {
var content = $(this).find('.content'),
tab = $('> ul li', this);
$('div', content).eq(0).show();
tab.click(function () {
tab.removeClass('active');
$(this).addClass('active');
$('div', content).hide().eq($(this).index()).show();
});
});
});
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
Boa noite,
Muito bom esse post
Fica realmente fácil de criar abas num site
Parabéns
Cumprimentos
César Oliveira
http://www.profissionalweb.net
Artigo direto e simples. Muito bom. Eu mesmo utizei essas tabs feitas com jQuery UI no meu site
Edgar
http://www.oasisdacomputacao.com.br
Estou precisando colocar abas em um sistema para coleta de dados. Minha dúvida é se eu implementar as abas com o Jquery se os dados coletados na página serão remetidos pelo post do form normalmente, isto é, mesmo eu tendo o preenchimento do formulário em cada uma das abas?
Desde já agradeço
Boa Tarde.
Não funcionou no IE9, como devo proceder para resolver?
Grato.
Seu IE deve estar com problema, pois funciona corretamente.
Muito Bom, sabe me dizer como faço para coloca o link para ir para determinada ABA ? Tem como dar um exemplo. Abraços…
Parabéns pelo seu site…
Detectei um pequeno problema. Como não tem classes nem IDs estabelecidos, eu não posso por exemplo criar uma UL dentro do .content… ele dá pau. Tentei arrumar aqui mas nao consegui ainda!
Bom modelo, funciona legal. Só tive problema com o conteúdo das tabs: imagens com float ficavam fora da caixa. Se alguém tiver o mesmo problema, sugiro adicionar ao .box .content > div um overflow:hidden.
Simples, sem firulagem, do jeito que precisava.
Pedro existe uma forma de colocar no JS para as tabs passarem automaticamente?
Dê uma olhada aqui: http://stackoverflow.com/questions/9980595/automatic-tab-switch-in-javascript-or-jquery tem vários exemplos de código que podem lhe ajudar.
Muito obrigada, Pedro!
Boa tarde; Pedro Rogério, tem alguma forma das tabs iniciarem invisíveis? e quando eu clicar de novo na mesma div ela esconder?
Obrigado desde já