How to keep current tab active after page refresh using jquery? - html

Question

Hi I am tying to keep current tab active after page reload refresh but unfortunatly it's not working what's my mistake Does anyone know please help me thanks.
HTML View
<!-- Tabs navs -->
<ul class="nav nav-tabs mb-5" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="ex1-tab-1" data-mdb-toggle="tab" href="#ex1-tabs-1" role="tab"
aria-controls="ex1-tabs-1" aria-selected="true">Slots</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link " id="ex1-tab-2" data-mdb-toggle="tab" href="#ex1-tabs-2" role="tab"
aria-controls="ex1-tabs-2" aria-selected="false">Booking List</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="ex1-tab-3" data-mdb-toggle="tab" href="#ex1-tabs-3" role="tab"
aria-controls="ex1-tabs-3" aria-selected="false">Rooms</a>
</li>
</ul>
<!-- Tabs navs -->
<div class="tab-pane fade" id="ex1-tabs-1" role="tabpanel" aria-labelledby="ex1-tab-1">
Tab one
</div>
<div class="tab-pane fade" id="ex1-tabs-2" role="tabpanel" aria-labelledby="ex1-tab-2">
Tab Two
</div>
<div class="tab-pane fade" id="ex1-tabs-3" role="tabpanel" aria-labelledby="ex1-tab-3">
Tab Three
</div>
Script
$(document).ready(function(){
$('a[data-mdb-toggle="tab"]').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#ex1 a[href="' + activeTab + '"]').tab('show');
}
});

Answer 1

Here is the working code snippet:
$(document).ready(function () {
$('.tab-link').on('click', function (e) {
localStorage.setItem('activeTab', $(this).attr('href'));
$(this).tab('show');
});
var activeTab = localStorage.getItem('activeTab');
if (activeTab) {
$('#ex1 a[href="' + activeTab + '"]').tab('show');
}
});
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
<!-- Tabs navs -->
<ul class="nav nav-tabs mb-5" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link tab-link active" id="ex1-tab-1" data-mdb-toggle="tab" href="#ex1-tabs-1" role="tab" aria-controls="ex1-tabs-1" aria-selected="true">Slots</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link tab-link" id="ex1-tab-2" data-mdb-toggle="tab" href="#ex1-tabs-2" role="tab" aria-controls="ex1-tabs-2" aria-selected="false">Booking List</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link tab-link" id="ex1-tab-3" data-mdb-toggle="tab" href="#ex1-tabs-3" role="tab" aria-controls="ex1-tabs-3" aria-selected="false">Rooms</a>
</li>
</ul>
<!-- Tabs navs -->
<div class="tab-pane fade" id="ex1-tabs-1" role="tabpanel" aria-labelledby="ex1-tab-1">
Tab one
</div>
<div class="tab-pane fade" id="ex1-tabs-2" role="tabpanel" aria-labelledby="ex1-tab-2">
Tab Two
</div>
<div class="tab-pane fade" id="ex1-tabs-3" role="tabpanel" aria-labelledby="ex1-tab-3">
Tab Three
</div>
Note: localStorage is disabled on Stackoverflow, so please execute this snippet on your local environment.