My code is not working. This code is basically for keeping active current selected page or tab on page refresh or page reload.
HTML code:
<section id="sidebar" class="refresh">
<a href="#" class="brand">
<!-- <i class='bx bxs-smile'></i> -->
<span class="text"><img src="images/logo.png" alt="" class="img-logo"></span>
</a>
<ul class="side-menu top" id="myTab">
<li class="active">
<a href="#dashboard" data-toggle="tab">
<i class='bx bxs-dashboard'></i>
<span class="text">Dashboard</span>
</a>
</li>
<li>
<a href="#1a" data-toggle="tab">
<i class='bx bxs-dashboard'></i>
<span class="text">Add Employee</span>
</a>
</li>
<li>
<a href="#2a" data-toggle="tab">
<i class='bx bxs-group'></i>
<span class="text">Show Employee</span>
</a>
</li>
</ul>
</section>
<section id="content">
<main>
<div class="tab-content clearfix">
<!-- dashboard -->
<div class="tab-pane active" id="dashboard">
<!-- some code -->
</div>
<div class="tab-pane" id="1a">
<!-- some code -->
</div>
<div class="tab-pane" id="2a">
<!-- some code -->
</div>
</main>
</section>
Javascript:
<script>
$('#myTab a').click(function(e){
e.preventDefault();
$(this).tab('show');
alert("h");
});
$("ul.side-menu > li a").on("shown.bs.tab",function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash=id;
});
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');
</script>
When I am refreshing the page this code is not working. This code is to keeping active current tab active when the page is refreshed or page reload
Simply add the currently active tab to localStorage. Do this by giving each tab a data attribute like data-index with a value like 1, 2, 3... Then you do
localStorage.setItem("tabIndex", $(ul li.active).data(index);)
which will save the data-index attribute of the active tab to the browser cache. You can then get the stored value after page load by using this
var tabindex = localStorage.getItem("tabIndex");.