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.
<-- 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 });