English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriales básicos de Bootstrap

Plugin de Bootstrap

Plugin de pestañas (Tab) de Bootstrap

Pestañas (Tab) en Elementos de navegación de Bootstrap se ha presentado. Mediante la combinación de algunas propiedades data, puede crear fácilmente una interfaz de pestañas. Con este complemento, puede colocar contenido en pestañas, cápsulas de pestañas o menús desplegables de pestañas.

Si desea引用此插件的特定功能，则需要引用 tab.js。O, como se Resumen de plugins de Bootstrap como se mencionó en el capítulo bootstrap.js o la versión comprimida bootstrap.min.js。

Uso

Puede activar las pestañas de la siguiente manera:

  • a través de la propiedad data：Necesita agregar data-toggle="tab" o data-toggle="pill" al enlace de texto de ancla.

    agregar nav 和 nav-tabs clase a ul en el que se aplicará Bootstrap estilo de etiqueta，agregar nav 和 nav-pills clase a ul en el que se aplicará Bootstrap estilo de cápsula。

    <ul>
　　　　<li><a　href="#identifier"　data-toggle="tab">Home</a></li>
　　　　...
</ul>

  • a través de JavaScript：Puede usar JavaScript para activar las pestañas, como se muestra a continuación:

    $('#myTab a').click(function(e) {
　　e.preventDefault()
　　$(this).tab('show')
)

    A continuación, se muestra un ejemplo de cómo activar las pestañas de diferentes maneras:

    //　Seleccione la pestaña por nombre
$('#myTab　a[href="#profile"]').tab('show')
//　Seleccione la primera pestaña
$('#myTab　a:first').tab('show')
//　Seleccione la última pestaña
$('#myTab　a:last').tab('show')
//　Seleccione la tercera pestaña (el índice comienza en 0)
$('#myTab　li:eq(2)　a').tab('show')

efectos de transición gradual

Si necesita configurar efectos de transición gradual para las pestañas, agregue .fade a cada .tab-pane después. La primera pestaña debe agregar .in clase, para mostrar el contenido inicial con transición gradual, como se muestra en el siguiente ejemplo:

<div>
　　　　<div　id="home">.../div>
　　　　<div　id="svn">.../div>
　　　　<div　id="ios">.../div>
　　　　<div　id="java">.../div>
</div>

在线示例

A continuación, se muestra un ejemplo del uso del atributo data del complemento de pestañas (Tab) y sus efectos de transición gradual:

在线示例

<!DOCTYPE　html>
<html>
<head>
	<meta	charset="utf-8">　
	<title>Bootstrap　示例　-　Métodos del complemento de pestañas (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">
			　Base Tutorial Web
		</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 es un sitio web que ofrece el último contenido de tecnología web, proporcionando documentos técnicos gratuitos relacionados con la creación de sitios web para ayudar a los entusiastas de la tecnología web a aprender rápidamente y construir su propio sitio web. Aprende lo básico primero, para poder avanzar más lejos.</p>
	</div>
	<div class="tab-pane fade" id="ios">
		<p>iOS es un sistema operativo para teléfonos móviles desarrollado y lanzado por Apple. Originalmente se lanzó　2007　año se lanzaron por primera vez iPhone, iPod Touch y Apple　
			TV. iOS se deriva de OS X, y ambos comparten la base Darwin. OS X es el sistema operativo utilizado en las computadoras de Apple, y iOS es la versión móvil de Apple./p>
	</div>
	<div class="tab-pane fade" id="jmeter">
		<p>jMeter es una herramienta de prueba de código abierto. Es　100% aplicaciones Java puras, utilizadas para pruebas de carga y rendimiento.</p>
	</div>
	<div class="tab-pane fade" id="ejb">
		<p>Enterprise Java Beans (EJB) es una arquitectura de desarrollo para crear aplicaciones empresariales altamente escalables y potentes, desplegadas en servidores de aplicaciones compatibles (como JBOSS, Web Logic, etc.) en el nivel J2EE. En.
		</p>
	</div>
</div>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

método

$().tab：Esta función puede activar el elemento de la pestaña y el contenedor de contenido. La pestaña necesita un data-target o un enlace a un nodo contenedor en el 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>

在线示例

A continuación, se muestra un ejemplo de los métodos del complemento de pestañas (Tab): .tab usos. En este ejemplo, la segunda pestaña iOS está activo:

在线示例

<!DOCTYPE　html>
<html>
<head>
	<meta	charset="utf-8">　
	<title>Bootstrap　示例　-　Métodos del complemento de pestañas (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">Base Tutorial Web</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 es un sitio web que ofrece el último contenido de tecnología web, proporcionando documentos técnicos gratuitos relacionados con la creación de sitios web para ayudar a los entusiastas de la tecnología web a aprender rápidamente y construir su propio sitio web. Aprende lo básico primero, para poder avanzar más lejos.</p>
	</div>
	<div class="tab-pane fade" id="ios">
		<p>iOS es un sistema operativo para teléfonos móviles desarrollado y lanzado por Apple. Originalmente se lanzó　2007　año se lanzaron por primera vez iPhone, iPod Touch y Apple　
			TV. iOS se deriva de OS X, y ambos comparten la base Darwin. OS X es el sistema operativo utilizado en las computadoras de Apple, y iOS es la versión móvil de Apple./p>
	</div>
	<div class="tab-pane fade" id="jmeter">
		<p>jMeter es una herramienta de prueba de código abierto. Es　100% aplicaciones Java puras, utilizadas para pruebas de carga y rendimiento.</p>
	</div>
	<div class="tab-pane fade" id="ejb">
		<p>Enterprise Java Beans (EJB) es una arquitectura de desarrollo para crear aplicaciones empresariales altamente escalables y potentes, desplegadas en servidores de aplicaciones compatibles (como JBOSS, Web Logic, etc.) en el nivel J2EE. En.
		</p>
	</div>
</div>
<script>
	$(function　()　{
		$('#myTab　li:eq(1)　a').tab('show');
	});
</script>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

事件

La siguiente tabla enumera los eventos que se utilizan en el complemento de pestañas (Tab). Estos eventos se pueden usar como ganchos en las funciones.

事件描述示例
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　//　前一个激活的标签页
)

在线示例

以下示例演示了标签页插件事件的用法。在本示例中，将显示当前和之前访问过的标签页：

在线示例

<!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 es un sitio web que ofrece el último contenido de tecnología web, proporcionando documentos técnicos gratuitos relacionados con la creación de sitios web para ayudar a los entusiastas de la tecnología web a aprender rápidamente y construir su propio sitio web. Aprende lo básico primero, para poder avanzar más lejos.</p>
	</div>
	<div class="tab-pane fade" id="ios">
		<p>iOS es un sistema operativo para teléfonos móviles desarrollado y lanzado por Apple. Originalmente se lanzó　2007　año se lanzaron por primera vez iPhone, iPod Touch y Apple　
			TV. iOS se deriva de OS X, y ambos comparten la base Darwin. OS X es el sistema operativo utilizado en las computadoras de Apple, y iOS es la versión móvil de Apple./p>
	</div>
	<div class="tab-pane fade" id="jmeter">
		<p>jMeter es una herramienta de prueba de código abierto. Es　100% aplicaciones Java puras, utilizadas para pruebas de carga y rendimiento.</p>
	</div>
	<div class="tab-pane fade" id="ejb">
		<p>Enterprise Java Beans (EJB) es una arquitectura de desarrollo para crear aplicaciones empresariales altamente escalables y potentes, desplegadas en servidores de aplicaciones compatibles (como JBOSS, Web Logic, etc.) en el nivel J2EE. En.
		</p>
	</div>
</div>
<script>
$(function() {
	$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
		//　Obtener el nombre de la pestaña activa
		var activeTab = $(e.target).text();　
		//　Obtener el nombre de la pestaña activa anterior
		var previousTab = $(e.relatedTarget).text();　
		$(".active-tab　span").html(activeTab);
		$(".previous-tab　span").html(previousTab);
	});
});
</script>
</body>
</html>
Prueba y mira ‹/›

Los resultados se muestran a continuación:

Complemento de herramienta de sugerencias de BootstrapComplemento de escucha de desplazamiento de Bootstrap