English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Guia (Tab) em Elementos de Navegação Bootstrap introduzido no capítulo. Combinando alguns atributos data, é fácil criar uma interface de guia. Com este plugin, é possível colocar conteúdo em guias, ou guias de capsulas, ou ainda guias de menu suspenso.
se vocé quiser citar funcionalidades do plugin individualmente, precisará citar tab.js. Ou, como Visão geral de plugins do Bootstrap como mencionado no capítulo bootstrap.js ou a versão comprimida bootstrap.min.js。
Vocé pode ativar a guia de duas maneiras:
através da propriedade dataVocé precisa adicionar data-toggle="tab" ou data-toggle="pill" ao link de texto de áncora.
adicionar nav 和 nav-tabs classe a ul neste contexto, será aplicado o Bootstrap estilo de rátulo, adicionar nav 和 nav-pills classe a ul neste contexto, será aplicado o Bootstrap estilo de capsula。
<ul> <li><a href="#identifier" data-toggle="tab">Home</a></li> ... </ul>
através do JavaScriptVocé pode usar JavaScript para ativar a guia, conforme mostrado a seguir:
$('#myTab a').click(function(e) {
e.preventDefault()
$(this).tab('show')
)Os exemplos a seguir demonstram como ativar as guias de diferentes maneiras:
// Selecionar a guia pelo nome
$('#myTab a[href="#profile"]').tab('show')
// Selecione a primeira guia
$('#myTab a:first').tab('show')
// Selecione a última guia
$('#myTab a:last').tab('show')
// Selecione a terceira guia (começando pelo índice 0)
$('#myTab li:eq(2) a').tab('show')Se precisar de efeitos de desvanecimento e reaparecimento para as guias, adicione .fade para cada .tab-pane depois. .in Classe, para exibir o conteúdo inicial suavemente, conforme o exemplo a seguir:
<div> <div id="home">.../div> <div id="svn">.../div> <div id="ios">.../div> <div id="java">.../div> </div>
Os exemplos a seguir demonstram o plug-in de guia (Tab) usando atributos de dados e seus efeitos de desvanecimento e reaparecimento:
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 示例 - Métodos do plug-in de guia (Tab)/title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#home" data-toggle="tab"> 基础教程网 </a> </li> <li><a href="#ios" data-toggle="tab">iOS</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li> <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li> </ul> </li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="home"> <p>Base Tutorial Website é um site que oferece as últimas tecnologias web, o site oferece documentação técnica relacionada ao desenvolvimento de sites gratuitamente, ajudando os entusiastas de tecnologia web a entrar rapidamente e construir seus próprios sites. Pássaros jovens voam cedo - aprender o básico é fundamental para ir mais longe.</p> </div> <div class="tab-pane fade" id="ios"> <p>iOS é um sistema operacional móvel desenvolvido e lançado pela Apple. Originalmente lançado em 2007 Ano em que foi lançado o iPhone, iPod Touch e o Apple TV. iOS deriva do OS X, eles compartilham a base Darwin. OS X é o sistema operacional usado em computadores Apple, iOS é a versão móvel da Apple.</p> </div> <div class="tab-pane fade" id="jmeter"> <p>jMeter é um software de teste open-source. É 100% aplicação Java pura, usada para testes de carga e desempenho.</p> </div> <div class="tab-pane fade" id="ejb"> <p>Enterprise Java Beans (EJB) é uma arquitetura de desenvolvimento para criar aplicações empresariais altamente escaláveis e robustas, implantadas em servidores de aplicativos compatíveis (como JBOSS, Web Logic, etc.) no Java.2EE no. </p> </div> </div> </body> </html>Teste e veja ‹/›
Os resultados são exibidos conforme mostrado a seguir:
$().tab：Este método pode ativar o elemento da guia e o contêiner de conteúdo. A guia precisa de um data-target ou um link para um nó contendo um contêiner DOM. href。
<ul id="myTab">
<li><a href="#identifier" data-toggle="tab">Home</a></li>
.....
</ul>
<div>
<div id="home">.../div>
.....
</div>
<script>
$(function () {
$('#myTab a:last').tab('show')
)
</script>Os exemplos a seguir demonstram os métodos do plug-in de guia (Tab) .tab usos. Neste exemplo, a segunda guia iOS está ativo:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 示例 - Métodos do plug-in de guia (Tab)/title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">基础教程网</a>
</li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">Java <b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
li><a href="#jmeter" tabindex="-1" data-toggle="tab">
jmeter</a>
</li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">
ejb</a>
</li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>Base Tutorial Website é um site que oferece as últimas tecnologias web, o site oferece documentação técnica relacionada ao desenvolvimento de sites gratuitamente, ajudando os entusiastas de tecnologia web a entrar rapidamente e construir seus próprios sites. Pássaros jovens voam cedo - aprender o básico é fundamental para ir mais longe.</p>
</div>
<div class="tab-pane fade" id="ios">
<p>iOS é um sistema operacional móvel desenvolvido e lançado pela Apple. Originalmente lançado em 2007 Ano em que foi lançado o iPhone, iPod Touch e o Apple
TV. iOS deriva do OS X, eles compartilham a base Darwin. OS X é o sistema operacional usado em computadores Apple, iOS é a versão móvel da Apple.</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>jMeter é um software de teste open-source. É 100% aplicação Java pura, usada para testes de carga e desempenho.</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans (EJB) é uma arquitetura de desenvolvimento para criar aplicações empresariais altamente escaláveis e robustas, implantadas em servidores de aplicativos compatíveis (como JBOSS, Web Logic, etc.) no Java.2EE no.
</p>
</div>
</div>
<script>
$(function () {
$('#myTab li:eq(1) a').tab('show');
});
</script>
</body>
</html>Teste e veja ‹/›Os resultados são exibidos conforme mostrado a seguir:
A tabela a seguir lista os eventos a serem usados no plug-in de guia (Tab). Esses eventos podem ser usados como ganchos em funções.
| 事件 | 描述 | 示例 |
|---|---|---|
| show.bs.tab | 该事件在标签页显示时触发，但是必须在新标签页被显示之前。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。 | $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
e.target // 激活的标签页
e.relatedTarget // 前一个激活的标签页
) |
| shown.bs.tab | 该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。 | $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
e.target // 激活的标签页
e.relatedTarget // 前一个激活的标签页
) |
下面的示例演示了标签页(Tab)插件事件的用法。在本示例中，将显示当前和前一个访问过的标签页：
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 示例 - 标签页(Tab)插件事件</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<hr>
<p class="active-tab"><strong>激活的标签页</strong>：<span></span></p>
<p class="previous-tab"><strong>前一个激活的标签页</strong>：<span></span></p>
<hr>
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">
基础教程网</a></li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">
Java <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>Base Tutorial Website é um site que oferece as últimas tecnologias web, o site oferece documentação técnica relacionada ao desenvolvimento de sites gratuitamente, ajudando os entusiastas de tecnologia web a entrar rapidamente e construir seus próprios sites. Pássaros jovens voam cedo - aprender o básico é fundamental para ir mais longe.</p>
</div>
<div class="tab-pane fade" id="ios">
<p>iOS é um sistema operacional móvel desenvolvido e lançado pela Apple. Originalmente lançado em 2007 Ano em que foi lançado o iPhone, iPod Touch e o Apple
TV. iOS deriva do OS X, eles compartilham a base Darwin. OS X é o sistema operacional usado em computadores Apple, iOS é a versão móvel da Apple.</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>jMeter é um software de teste open-source. É 100% aplicação Java pura, usada para testes de carga e desempenho.</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans (EJB) é uma arquitetura de desenvolvimento para criar aplicações empresariais altamente escaláveis e robustas, implantadas em servidores de aplicativos compatíveis (como JBOSS, Web Logic, etc.) no Java.2EE no.
</p>
</div>
</div>
<script>
$(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
// Obter o nome do tab ativo
var activeTab = $(e.target).text();
// Obter o nome do último tab ativo
var previousTab = $(e.relatedTarget).text();
-$(".active
$(".previous tab span").html(activeTab);-tab span
});
});
</script>
</body>
</html>Teste e veja ‹/›Os resultados são exibidos conforme mostrado a seguir: