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

10.11.2022

2705

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

Открыть вкладку по кнопке

<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

Результат:

Открыть вкладку по location.hash

Если требуется открыть вкладку по хешу из 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