Generally, when you refresh a page with multiple tabs on it, the the active tab gets reset to the default initial tab instead of current active, after page refresh. Sometimes you may want users to stay on same tab after page refresh. This is especially true if you are building a web application or site with multiple tabs on it. In this article, we will learn how to stay on same table after page refresh using JavaScript.
How to Stay on Same Tab After Page Refresh
The basic idea is to keep an identifier for each each tab, and store the identifier about your current active tab in browser’s local storage or session storage, and recall it on page load. If you store the value of current active tab in a local variable, it will be lost on page refresh. So we need to store information about latest active tab in something that exists across page refresh, such as session storage.
Let us say you have the following tab content.
<div class="m-3">
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item">
<a href="#sectionA" class="nav-link active" data-toggle="tab">Section A</a>
</li>
<li class="nav-item">
<a href="#sectionB" class="nav-link" data-toggle="tab">Section B</a>
</li>
<li class="nav-item">
<a href="#sectionC" class="nav-link" data-toggle="tab">Section C</a>
</li>
</ul>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade show active">
<h3>Section A</h3>
<p>Aliquip placeat salvia cillum iphone...</p>
</div>
<div id="sectionB" class="tab-pane fade">
<h3>Section B</h3>
<p>Vestibulum nec erat eu nulla rhoncus fringilla...</p>
</div>
<div id="sectionC" class="tab-pane fade">
<h3>Section C</h3>
<p>Nullam hendrerit justo non leo aliquet...</p>
</div>
</div>
</div>
Here is a simple JS code to display active tab when page is loaded.
<script>
$(document).ready(function(){
$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#myTab a[href="' + activeTab + '"]').tab('show');
}
});
</script>
In the above code, we set the item activeTab in local storage to the href attribute of active tab, whenever it is changed, that is, whenever a tab is displayed. This gets triggered every time the user changes tabs. We use an event handler for ‘on’ event of the tab. When the page is loaded, we also retrieve this value from the local storage variable, and use it to show the active tab.
Also read:
How to Select Element by Name in JavaScript
How to Get Value of Selected Radio Button
How to Disable Browser AutoFill Using JavaScript
How to Stop Browser Back Button Using JavaScript
How to Disable Clicks in IFrame Using JavaScript