Как открыть вкладку Bootstrap tabs

Если требуется сделать возможность открыть какую либо вкладку в 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
180

Комментарии

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

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

Список MIME типов
Ниже приведён список MIME-заголовков и расширений файлов.
15181
+5
Select option с ссылками
По спецификации HTML в option нельзя вставить ссылку, если все-таки её туда вставить, то работать она не будет. В таких случаях можно сделать перенаправление браузера по клику на JS или имитацию...
17981
+8
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
41159
+7
Работа с cookie в JavaScript
Сookies или куки – это данные в виде пар ключ=значение, которые хранятся в файлах на компьютере пользователя. Для хранимых данных существуют несколько ограничений...
31997
+7
Фиксированное горизонтальное меню с активными пунктами
Пример горизонтального меню для лэндингов, в котором реализовано...
10036
+5
Яндекс.Доставка работа с API в PHP
Примеры работы с API Яндекс.Доставки (для заказа перевозки грузов корпоративным клиентам).
3418
+6