Este exemplo apresenta a aplicação da implementação da guia da guia. Este plug-in é relativamente simples. O conteúdo específico é o seguinte
Arquivo de código -fonte:
tab.js
Princípio de implementação:
1. Ao clicar em um elemento, cancele primeiro o elemento originalmente destacado.
2. Em seguida, destaque o elemento clicado
3. Se clicar em um elemento é uma opção na caixa suspensa, selecione-se e também selecione a caixa suspensa.
5. Se a animação for definida, execute a animação primeiro e depois o retorno de chamada
Análise de código -fonte:
1. O método de show é acionado quando um elemento é clicado, que acionará os quatro eventos a seguir.
1.1. Hiden.bs.tab: ocultar o elemento anterior
1.2. Show.bs.tab: mostre o elemento atual
1.3. Hideen.bs.tab: Concluído escondendo o elemento anterior
1.4. Mostrado.bs.tab: mostre o elemento atual completo
1.5. Código fonte do evento Hiden/Show:
var $ anterior = $ ul.find ('. Ativo: último a') var hidevent = $ .event ('hide.bs.tab', {RelatedTarget: $ this [0]}) var showevent = $ .event ('show.bs.tab', {RelatedTarget: $ anterior [0]})2. Ativo: Ative o objeto atual
2.1. Adicione o atributo Expandido de ARIA ao elemento de navegação para marcar se esse elemento está no estado expandido
2.2. Usando o mecanismo de reflexão, use o atributo de largura de deslocamento para obter repintura parcial
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
Esta série de tutoriais foi compilada em: Bootstrap Basic Tutorials Tópico Especial, bem -vindo ao clicar para aprender.
O exposto acima é tudo sobre este artigo, espero que seja útil para todos aprenderem a programação de JavaScript.