Implementar a aplicação da guia da guia, este plug -in é relativamente simples
Arquivo de código -fonte:
tab.js
Princípio da 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
A breve discussão acima sobre a guia Análise de Código -fonte do Bootstrap (TAB) é todo o conteúdo que compartilho com você. Espero que possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.