LOCAWEB STYLE

Documentação Locaweb Style

Abas ou tabs

Tabs são perfeitos para organizar informações em painéis de conteúdo, onde o acesso precisa ser rápido e quando há muito conteúdo sobre um determinado assunto.

Conteúdo Tab 1

Conteúdo Tab 2

Conteúdo Tab 3

<-- Tabs / Guias -->
<ul class="tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">7 dias</a></li>
    <li><a href="#tab2" data-toggle="tab">30 dias</a></li>
    <li><a href="#tab3" data-toggle="tab">6 meses</a></li>
</ul>
 
<-- Código do conteúdo das tabs -->
<div class="tab-content">
    <div class="tab-pane active" id="tab1">Conteúdo Tab 1</div>
    <div class="tab-pane" id="tab2">Conteúdo Tab 2</div>
    <div class="tab-pane" id="tab3">Conteúdo Tab 3</div>
</div>

Ativando

$('#tabs a').click(function(e) {
   $(this).tab('show');
   e.preventDefault();
});	

Eventos

Evento Descrição
show Este evento é acionado em exposição da tab, mas antes de a nova tab for mostrada.
shown Este evento é acionado depois que a tab é mostrada.

Use event.target e event.relatedTarget para pegar a tab ativa e a tab anterior ativa, se disponível respectivamente.

$('a[data-toggle="tab"]').on('shown', function (e) {
	e.target // tab ativada
	e.relatedTarget // tab anterior
});