Guia (guia) Combinando algumas propriedades de dados, você pode criar facilmente uma interface da guia.
"Se você deseja fazer referência à funcionalidade do plug -in separadamente, é necessário fazer referência a tab.js. ou, conforme mencionado no capítulo Geralmente do Bootstrap Plugin, você pode fazer referência ao bootstrap.js ou versões compactadas do bootstrap.min.js".
1. Uso
Você pode ativar as páginas da guia de duas maneiras:
Por propriedade de dados: você precisa adicionar data-toggle = "tab" ou data-toggle = "pílula" ao link de texto da âncora.
A adição de classes NAV e NAV-TABS à UL aplicará o estilo de tag de bootstrap, adicionar classes de navegação e pílula de navegação à UL aplicará o estilo da cápsula de bootstrap.
<ul> <li> <a href = "#identificador" data-toggle = "tab"> home </a> </li> ... </ul>
Através do JavaScript: você pode usar o JavaScript para ativar as guias da seguinte forma:
$ ('#mytab a'). clique (function (e) {e.preventDefault () $ (this) .tab ('show')})O exemplo a seguir demonstra a ativação de guias individuais de diferentes maneiras:
// Selecione a página da guia $ ('#mytab a [href = "#perfil"]'). TAB ('show') // Selecione a primeira guia página $ ('#mytab a: primeiro'). Tab ('tabe') // Selecione a última guia Page $ ('#mytab a: last'). A '). TAB (' SHOW ')2. Efeito desbotado
Se você precisar definir um efeito de desbotamento para a guia, adicione .Fade a cada pane .tab. A primeira guia deve ser adicionada com uma classe .in para desaparecer para exibir o conteúdo inicial, conforme mostrado no exemplo a seguir:
<div> <div id = "home"> ... </div> <div id = "svn"> ... </div> <div id = "ios"> ... </div> <div id = "java"> ... </div> </div>
3. Método
. $ (). Guia: Este método ativa elementos de guia e contêineres de conteúdo. A página da guia precisa usar um alvo de dados ou um href apontando para o nó do contêiner no DOM.
<l ul id = "mytab"> <li> <a href = "#identificador" data-toggle = "tab"> home </a> </li> ...../ul> <div> <div id = "home"> ... </div> .... </div> <cript> $ (function) {$ ('#mytab a: last).4. Eventos
A tabela a seguir lista os eventos a serem usados no plug -in do Tab (Tab). Esses eventos podem ser usados como ganchos nas funções.
5. Exemplos básicos
1. Tags
As páginas da guia são comumente conhecidas como funções de guia.
//Basic Usage <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">jQuery</a> </li> <li> <a href = "#extjs" data-toggle = "tab"> extjs </a> </li> </ul> <div style = "preenchimento: 10px;"> <div id = "html5"> ... </div> <div Id ... bootstrap "> ... </divml5"> ... </div> </div>
// O efeito de desbotamento pode ser definido e indica que o conteúdo preferido é exibido por padrão <div id = "html5"> // também pode ser substituído por cápsula <ul> // Data-Target
A ligação ou não o efeito de ligação é o mesmo com o alvo de dados
// Use JavaScript e use diretamente o método da guia. $ ('#NAV A'). ON ('Click', function (e) {e.PreventDefault (); $ (this) .tab ('show');}); // eventos, outras semelhanças $ ('#Nav A'). $ ('#NAV A'). ON ('mostrado.bs.tab', function () {alert ('livre ao exibir a guia!');});Esta série de tutoriais foi compilada em: Bootstrap Basic Tutorials Tópicos Especiais, bem -vindo ao clicar para aprender.
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 da tabela de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.