Как открыть вкладку Bootstrap tabs через JS

Если требуется сделать возможность открыть какую либо вкладку в Bootstrap tabs из вне, например по отдельной ссылке или по хешу страницы, возможны следующие варианты.

Разметка табов имеет следующий вид:

<ul class="nav nav-tabs">
	<li class="nav-item">
		<a class="nav-link active" data-toggle="tab" href="#tab-1">Home</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" data-toggle="tab" href="#tab-2">Profile</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" data-toggle="tab" href="#tab-3">Contact</a>
	</li>
</ul>

<div class="tab-content">
	<div class="tab-pane fade show active" id="tab-1">
		<h3>Вкладка #tab-1</h3>
	</div>
	<div class="tab-pane fade" id="tab-2">
		<h3>Вкладка #tab-2</h3>
	</div>
	<div class="tab-pane fade" id="tab-3">
  		<h3>Вкладка #tab-3</h3>
	</div>
</div>
HTML

Для открытия вкладки предназначен метод .tab('show'), назначаемый по селектору:

$('.nav-tabs a[href="#tab-2"]').tab('show'); // По id вкладки
$('.nav-tabs li:first a').tab('show');       // Первая вкладка
$('.nav-tabs li:last a').tab('show');        // Последняя вкладка
$('.nav-tabs li:eq(1) a').tab('show');       // 2-я вкладка
JS
<button onclick="$('.nav-tabs a[href=#tab-1]').tab('show');">Открыть вкладку #1</button>
<button onclick="$('.nav-tabs a[href=#tab-2]').tab('show');">Открыть вкладку #2</button>
<button onclick="$('.nav-tabs a[href=#tab-3]').tab('show');">Открыть вкладку #3</button>  

<ul class="nav nav-tabs">
	<li class="nav-item">
		<a class="nav-link active" data-toggle="tab" href="#tab-1">Home</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" data-toggle="tab" href="#tab-2">Profile</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" data-toggle="tab" href="#tab-3">Contact</a>
	</li>
</ul>

<div class="tab-content">
	<div class="tab-pane fade show active" id="tab-1">
		<h3>Вкладка #tab-1</h3>
	</div>
	<div class="tab-pane fade" id="tab-2">
		<h3>Вкладка #tab-2</h3>
	</div>
	<div class="tab-pane fade" id="tab-3">
  		<h3>Вкладка #tab-3</h3>
	</div>
</div>
HTML

Результат:

Если требуется открыть вкладку по хешу из URL-адреса страницы.

<ul class="nav nav-tabs">
	<li class="nav-item">
		<a class="nav-link active" data-toggle="tab" href="#tab-1">Home</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" data-toggle="tab" href="#tab-2">Profile</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" data-toggle="tab" href="#tab-3">Contact</a>
	</li>
</ul>

<div class="tab-content">
	<div class="tab-pane fade show active" id="tab-1">
		<h3>Вкладка #tab-1</h3>
	</div>
	<div class="tab-pane fade" id="tab-2">
		<h3>Вкладка #tab-2</h3>
	</div>
	<div class="tab-pane fade" id="tab-3">
  		<h3>Вкладка #tab-3</h3>
	</div>
</div>

<script>
$(document).ready(function(){
	if(hash = window.location.hash ) {
		$('a[href="' + hash + '"]').tab('show');
	}	
});
</script>
HTML

Результат:

10.11.2022, обновлено 21.03.2023
2467

Комментарии 1

Рашид Гиззатов Рашид Гиззатов
17 мая 2023 в 17:46
-3
А в пятой версии как это сделать?

, чтобы добавить комментарий.

Другие публикации

Список MIME типов
Ниже приведён список MIME-заголовков и расширений файлов.
24262
+7
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
72243
+3
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
59219
+7
Фиксированное горизонтальное меню с активными пунктами
Пример горизонтального меню для лэндингов, в котором реализовано...
12365
+3
Работа с FTP в PHP
Протокол FTP – предназначен для передачи файлов на удаленный хост. В PHP функции для работы с FTP как правило всегда доступны и не требуется установка дополнительного расширения.
17856
+2
Яндекс.Доставка работа с API в PHP
Примеры работы с API Яндекс.Доставки (для заказа перевозки грузов корпоративным клиентам).
8277
+5