Tab (pestaña) Al combinar algunas propiedades de datos, puede crear fácilmente una interfaz de pestaña.
"Si desea hacer referencia a la funcionalidad del complemento por separado, debe hacer referencia a Tab.js. o, como se menciona en el capítulo de descripción general del complemento Bootstrap, puede hacer referencia a Bootstrap.js o versiones comprimidas de bootstrap.min.js".
1. Uso
Puede habilitar páginas de pestaña de dos maneras:
Por propiedad de datos: debe agregar datos de datos = "pestaña" o data-toggle = "píldora" al enlace de texto de anclaje.
Agregar clases de NAV y NAV-Tabs a UL aplicará el estilo de etiqueta Bootstrap, agregando clases de NAV y Pills de NAV a UL aplicará el estilo de cápsula Bootstrap.
<ul> <li> <a href = "#identificador" data-toggle = "tab"> inicio </a> </li> ... </ul>
A través de JavaScript: puede usar JavaScript para habilitar las pestañas de la siguiente manera:
$ ('#mytab a'). Click (function (e) {e.preventDefault () $ (this) .tab ('show')})El siguiente ejemplo demuestra la activación de pestañas individuales de diferentes maneras:
// Seleccione la página de pestaña $ ('#mytab a [href = "#perfil"]'). Tab ('show') // Seleccione la primera página de pestaña $ ('#mytab a: primero'). Tab ('show') // Seleccione la última página de pestaña $ ('#mytab a: último'). Tab ('show') // Seleccione la tercera página de pestaña (indexada de 0) $ ('#mytab li (2 (2 (2). A '). Tab (' show ')2. Efecto de desvanecimiento
Si necesita establecer un efecto de desvanecimiento para la pestaña, agregue .fade a cada panel .tab. La primera pestaña debe agregarse con una clase .in para desvanecerse para mostrar el contenido inicial, como se muestra en el siguiente ejemplo:
<Div> <div id = "home"> ... </div> <div id = "svn"> ... </div> <div id = "iOS"> ... </div> <div id = "java"> ... </div> </div>
3. Método
. $ (). Tab: este método activa elementos de pestaña y contenedores de contenido. La página de pestañas debe usar un objetivo de datos o un href que apunte al nodo del contenedor en el DOM.
<ul id = "mytab"> <li> <a href = "#identificador" data-toggle = "tab"> home </a> </li> ..... </ul> <div> <divi Id = "home"> ... </div> .... </div> <script> $ (function () {$ ('#mytab a: último'). Tab (show)})IV. Eventos
La siguiente tabla enumera los eventos que se utilizarán en el complemento de pestaña (pestaña). Estos eventos se pueden usar como ganchos en las funciones.
5. Ejemplos básicos
1. Etiquetas
Las páginas de pestañas se conocen comúnmente como funciones de pestaña.
// Uso básico <ul> <li> <a href = "#html5" data-toggle = "tab"> html5 </a> </li> <li> <a href = "#bootstrap" data-toggle = "Tab"> bootstrap </a> </li> <li> <a href = "#jquery" data-toggle = "tab" Tab " </li> <li> <a href = "#extjs" data-toggle = "tab"> extjs </a> </li> </ul> <div style = "relleno: 10px;"> <dividir = "html5"> ... </bit> <div it = "bootstrap"> ... </div> <Div Id = "jququery"> ... </div> <div> </div> </div>
// El efecto de desvanecimiento se puede establecer, e IN indica que el contenido preferido se muestra por defecto <div id = "html5"> // También se puede reemplazar con la cápsula <ul> //-Target de datos
El efecto de unión o no es el mismo con el objetivo de datos
// Use JavaScript y use directamente el método de pestaña. $ ('#Nav A'). on ('Click', function (e) {E.PreventDefault (); $ (this) .tab ('show');}); // eventos, otras similitudes $ ('#nav a'). On ('show.bs.tab', function () {alert ('gratis al llamar pestaña!');}); $ ('#nav a'). on ('shows.bs.tab', function () {alert ('gratis al mostrar pestaña!');});Esta serie de tutoriales se ha compilado en: Tutoriales básicos de Bootstrap Temas especiales, bienvenidos a Click To Learn.
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de la mesa de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.