JS Tab (tab.js)
As guias são usadas para separar o conteúdo em painéis diferentes, em que cada painel está visível uma de cada vez.
Para um tutorial sobre Tabs, leia o nosso Bootstrap Tabs/Pills Tutorial .
As Classes Tab Plugin
| Classe | Descrição | Exemplo |
|---|---|---|
| .nav nav-tabs | Cria guias de navegação | Tente |
| .nav-justified | Faz navegação tabs/pills larguras iguais de seus pais, em telas mais amplo do que 768px. Em telas menores, as guias nav são empilhados | Tente |
| .tab-content | Juntamente com .tab-pane e data-toggle="tab" , faz a toggable guia | Tente |
| .tab-pane | Juntamente com .tab-content e data-toggle="tab" , faz a toggable guia | Tente |
Via data-* Atributos
Adicionar data-toggle="tab" para cada guia, e adicionar um .tab-pane classe com um ID único para cada guia e envolvê-los em uma .tab-content classe.
Exemplo
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab"
href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu
1</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in
active">
<h3>HOME</h3>
<p>Some
content.</p>
</div>
<div id="menu1" class="tab-pane
fade">
<h3>Menu 1</h3>
<p>Some
content in menu 1.</p>
</div>
</div>
Tente você mesmo " via JavaScript
Habilitar manualmente com:
Exemplo
// Select all tabs
$('.nav-tabs a').click(function(){
$(this).tab('show');
})
// Select tab by name
$('.nav-tabs a[href="#home"]').tab('show')
// Select first tab
$('.nav-tabs a:first').tab('show')
// Select
last tab
$('.nav-tabs a:last').tab('show')
// Select fourth tab
(zero-based)
$('.nav-tabs li:eq(3) a').tab('show')
Tente você mesmo " Opções de guia
| None |
Métodos Tab
A tabela a seguir lista os métodos de tabulação todos disponíveis.
| Método | Descrição | Tente |
|---|---|---|
| .tab("show") | Mostra a guia | Tente |
guia Eventos
A tabela a seguir lista os eventos guia Todos os disponíveis.
| Evento | Descrição | Tente |
|---|---|---|
| show.bs.tab | Ocorre quando o guia está prestes a ser mostrado. | Tente |
| shown.bs.tab | Ocorre quando a guia é totalmente mostrado (após transições CSS foram concluídas) | Tente |
| hide.bs.tab | Ocorre quando o guia está prestes a ser ocultado | Tente |
| hidden.bs.tab | Ocorre quando a guia é totalmente escondida (após transições CSS foram concluídas) | Tente |
Dica: Use jQuery event.target e event.relatedTarget para obter a guia ativa e a guia ativa anterior:
Exemplo
$('.nav-tabs a').on('shown.bs.tab', function(event){
var x = $(event.target).text();
// active tab
var y = $(event.relatedTarget).text();
// previous tab
}); Tente você mesmo "