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

Основной учебник Bootstrap

Bootstrap плагин

Bootstrap вкладка (Tab) плагин

Вкладка (Tab) в Элементы навигации Bootstrap где介绍了. С помощью комбинации некоторых атрибутов data можно легко создать интерфейс вкладок. С помощью этого плагина вы можете поместить контент в вкладки, капсульные вкладки или даже выпадающие меню вкладок.

Если вы хотите использовать функции плагина отдельно, вам нужно ссылаться на tab.jsили, как Обзор плагинов Bootstrap Как упоминалось в главе bootstrap.js или сжатую версию bootstrap.min.js.

Пример использования

Вы можете активировать вкладки двумя способами:

  • через атрибут dataДля активации вкладок вам нужно добавить data-toggle="tab" или data-toggle="pill" в текст ссылок.

    добавить nav и nav-tabs класс к ul в котором будет применяться Bootstrap стиль вкладкии добавить nav и nav-pills класс к ul в котором будет применяться Bootstrap Капсульный стиль.

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

  • через JavaScriptВы можете использовать Javascript для активации вкладок, как показано ниже:

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

    Ниже приведен пример активации вкладок различными способами:

    // Выбрать вкладку по имени
$('#myTab a[href="#profile"]').tab('show')
// Выбрать первую вкладку
$('#myTab a:first').tab('show')
// Выбрать последнюю вкладку
$('#myTab a:last').tab('show');
// Выбрать третью вкладку (индекс начинается с 0)
$('#myTab li:eq(2) a').tab('show')

эффект淡入淡出

Если необходимо установить эффект淡入淡出 для вкладки, добавьте .fade каждой .tab-pane в .in класс, чтобы показать начальный контент с эффектом淡入, как показано в следующем примере:

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

Онлайн пример

Ниже приведен пример использования вкладки (Tab) плагина с помощью атрибута data и эффекта淡入淡出:

Онлайн пример

<!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>
<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>Базовый учебный сайт - это сайт, предоставляющий最新的 веб-технологии, на котором бесплатно предоставляются технические документы по созданию веб-сайтов, помогающие широкому кругу веб-технологических энтузиастов быстро освоить навыки и создать свой веб-сайт. Птица вылетает рано - чтобы идти дальше, нужно выучить основы.</p>
	</div>
	<div class="tab-pane fade" id="ios">
		<p>iOS - это мобильная операционная система, разработанная и выпущенная компанией Apple. Впервые была выпущена в 2007 году с iPhone, iPod Touch и Apple　
			<p>TV iOS производят от OS X, они разделяют основу Darwin. OS X - это операционная система, используемая на компьютерах Apple, iOS - это мобильная версия Apple.</p>
	</div>
	<div class="tab-pane fade" id="jmeter">
		<p>jMeter - это开源 тестовое программное обеспечение. Это 100% чистый Java-приложение, предназначенное для тестирования нагрузки и производительности.</p>
	</div>
	<div class="tab-pane fade" id="ejb">
		<p>Enterprise Java Beans (EJB) - это архитектура разработки, обеспечивающая высокую масштабируемость и мощные корпоративные приложения, развернутые на J2EE, совместимом с приложениями серверами (например, JBOSS, Web Logic и т.д.).
		</p>
	</div>
</div>
</body>
</html>
Проверьте, посмотрите ‹/›

Результаты показаны ниже:

метод

$().tab：Этот метод может активировать элемент вкладки и контейнер содержимого. Вкладка должна быть обозначена data-target или ссылка на контейнер узла 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>

Онлайн пример

ниже приведен пример методов плагина вкладок (Tab). .tab использование. В этом примере, вторая вкладка iOS является активной:

Онлайн пример

<!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>
<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>Базовый учебный сайт - это сайт, предоставляющий最新的 веб-технологии, на котором бесплатно предоставляются технические документы по созданию веб-сайтов, помогающие широкому кругу веб-технологических энтузиастов быстро освоить навыки и создать свой веб-сайт. Птица вылетает рано - чтобы идти дальше, нужно выучить основы.</p>
	</div>
	<div class="tab-pane fade" id="ios">
		<p>iOS - это мобильная операционная система, разработанная и выпущенная компанией Apple. Впервые была выпущена в 2007 году с iPhone, iPod Touch и Apple　
			<p>TV iOS производят от OS X, они разделяют основу Darwin. OS X - это операционная система, используемая на компьютерах Apple, iOS - это мобильная версия Apple.</p>
	</div>
	<div class="tab-pane fade" id="jmeter">
		<p>jMeter - это开源 тестовое программное обеспечение. Это 100% чистый Java-приложение, предназначенное для тестирования нагрузки и производительности.</p>
	</div>
	<div class="tab-pane fade" id="ejb">
		<p>Enterprise Java Beans (EJB) - это архитектура разработки, обеспечивающая высокую масштабируемость и мощные корпоративные приложения, развернутые на J2EE, совместимом с приложениями серверами (например, JBOSS, Web Logic и т.д.).
		</p>
	</div>
</div>
<script>
	$(function() {
		$('#myTab li:eq(1) a').tab('show');
	});
</script>
</body>
</html>
Проверьте, посмотрите ‹/›

Результаты показаны ниже:

событие

В таблице ниже перечислены события, используемые в плагине вкладок (Tab). Эти события могут использоваться в функции в качестве гвоздей.

событиеОписаниеПример
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>Базовый учебный сайт - это сайт, предоставляющий最新的 веб-технологии, на котором бесплатно предоставляются технические документы по созданию веб-сайтов, помогающие широкому кругу веб-технологических энтузиастов быстро освоить навыки и создать свой веб-сайт. Птица вылетает рано - чтобы идти дальше, нужно выучить основы.</p>
	</div>
	<div class="tab-pane fade" id="ios">
		<p>iOS - это мобильная операционная система, разработанная и выпущенная компанией Apple. Впервые была выпущена в 2007 году с iPhone, iPod Touch и Apple　
			<p>TV iOS производят от OS X, они разделяют основу Darwin. OS X - это операционная система, используемая на компьютерах Apple, iOS - это мобильная версия Apple.</p>
	</div>
	<div class="tab-pane fade" id="jmeter">
		<p>jMeter - это开源 тестовое программное обеспечение. Это 100% чистый Java-приложение, предназначенное для тестирования нагрузки и производительности.</p>
	</div>
	<div class="tab-pane fade" id="ejb">
		<p>Enterprise Java Beans (EJB) - это архитектура разработки, обеспечивающая высокую масштабируемость и мощные корпоративные приложения, развернутые на J2EE, совместимом с приложениями серверами (например, JBOSS, Web Logic и т.д.).
		</p>
	</div>
</div>
<script>
$(function() {
	$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
		// Получение названия активной вкладки
		var activeTab = $(e.target).text();　
		// Получение названия предыдущей активной вкладки
		var previousTab = $(e.relatedTarget).text();　
		$(".active-tab span").html(activeTab);
		$(".previous-tab span").html(previousTab);
	});
});
</script>
</body>
</html>
Проверьте, посмотрите ‹/›

Результаты показаны ниже:

Плагин инструментов提示 BootstrapПлагин мониторинга скроллинга Bootstrap