Este ejemplo introduce la aplicación de implementar la pestaña de pestaña. Este complemento es relativamente simple. El contenido específico es el siguiente
Archivo del código fuente:
tab.js
Principio de implementación:
1. Al hacer clic en un elemento, primero cancele el elemento resaltado originalmente.
2. Luego resalte el elemento hecho hecho
3. Si hacer clic en un elemento es una opción en el cuadro desplegable, seleccione y seleccione también el cuadro desplegable.
5. Si se define la animación, ejecute la animación primero y luego la devolución de llamada
Análisis del código fuente:
1. El método de espectáculo se activa cuando se hace clic en un elemento, lo que activará los siguientes cuatro eventos.
1.1. Hiden.bs.tab: ocultar el elemento anterior
1.2. Show.bs.tab: Mostrar el elemento actual
1.3. Hideen.bs.tab: completado ocultando el elemento anterior
1.4. Mostrado.bs.tab: Mostrar el elemento actual completo
1.5. Código fuente del evento Hiden/Show:
var $ anterior = $ ul.find ('. Active: Last a') var hideEvent = $ .event ('hide.bs.tab', {RelationTarget: $ this [0]}) var showEvent = $ .event ('show.bs.tab', {RelationTarget: $ anterior [0]})2. Activo: active el objeto actual
2.1. Agregue el atributo expandido de ARIA al elemento de navegación para marcar si este elemento está en el estado expandido
2.2. Usando el mecanismo de reflujo, use el atributo OffsetWidth para lograr el repintado parcial
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 complemento de bootstrap
Esta serie de tutoriales se ha compilado en: tutorial básico de bootstrap Tema especial, bienvenido a hacer clic para aprender.
Lo anterior se trata de este artículo, espero que sea útil para todos aprender la programación de JavaScript.