Save open tab in Bootstrap Tabs

This article introduces two methods on how to keep open tab in Bootstrap Tabs, browser page reload box.

Using Bootstrap 4.3 as an example, the layout will be as follows:

<ul class="nav nav-tabs">
	<li class="nav-item">
		<a class="nav-link active" id="home-tab" data-toggle="tab" href="#tab-1">Home</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" id="profile-tab" data-toggle="tab" href="#tab-2">Profile</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" id="contact-tab" 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

Scripts are bound to elements by the .nav-tabs class and the .active active tab, the tab('show') JS method is also used.

23.12.2020, updated 09.06.2021
68

Comments

to add a comment.

Other publications