JS Tab (tab.js)
Aquí se utilizan para separar el contenido en diferentes paneles de la que cada panel es uno visible a la vez.
Para ver un tutorial sobre más aquí, leer nuestros Bootstrap Tabs/Pills Tutorial .
Las clases Tab Plugin
| Clase | Descripción | Ejemplo |
|---|---|---|
| .nav nav-tabs | Crea pestañas de navegación | Intentalo |
| .nav-justified | Facilita la navegación por tabs/pills anchuras iguales de sus padres, en pantallas más anchas que 768px. En pantallas más pequeñas, las pestañas de navegación se apilan | Intentalo |
| .tab-content | Junto con .tab-pane y data-toggle="tab" , hace que la pestaña toggable | Intentalo |
| .tab-pane | Junto con .tab-content y data-toggle="tab" , hace que la pestaña toggable | Intentalo |
Via data-* Atributos
Añadir data-toggle="tab" de cada ficha, y añadir un .tab-pane clase con un identificador único para cada pestaña y se envuelven en una .tab-content clase.
Ejemplo
<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>
Inténtalo tú mismo " a través de JavaScript
Habilitar manualmente con:
Ejemplo
// 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')
Inténtalo tú mismo " Opciones de la ficha
| None |
Métodos Tab
En la siguiente tabla se enumeran los métodos de la ficha todos disponibles.
| Método | Descripción | Intentalo |
|---|---|---|
| .tab("show") | Muestra la pestaña | Intentalo |
pestaña de eventos
En la siguiente tabla se enumeran los eventos de la ficha todos disponibles.
| Evento | Descripción | Intentalo |
|---|---|---|
| show.bs.tab | Se produce cuando la ficha está a punto de ser mostrado. | Intentalo |
| shown.bs.tab | Se produce cuando la ficha está totalmente muestra (después de haber completado transiciones CSS) | Intentalo |
| hide.bs.tab | Se produce cuando la ficha está a punto de ser ocultado | Intentalo |
| hidden.bs.tab | Se produce cuando la ficha está totalmente oculta (después de las transiciones CSS han completado) | Intentalo |
Consejo: Usar jQuery event.target y event.relatedTarget para obtener la pestaña activa y la pestaña activa anterior:
Ejemplo
$('.nav-tabs a').on('shown.bs.tab', function(event){
var x = $(event.target).text();
// active tab
var y = $(event.relatedTarget).text();
// previous tab
}); Inténtalo tú mismo "