Bootstrap 4 remember tab
How can I get the browser to remember which tab the user was viewing when the page is refreshed or revised?
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
Profile Messages Settings
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
source to share
Here's one way to do it. Obviously this won't work as the snippet is on stackoverflow.com and the hash won't be appended to the url. I've tested this locally, although it works.
Note. ... This will only work if you refresh the page or otherwise use the specific URL that links to the tab you are opening. If you want it to "remember" the tab after you close your browser / tab or whatever, you are probably best off using a cookie, or perhaps storing it in a database if you are dealing with client sessions.
//When the page loads, get the current # value and mark the li as "active" if the href attribute matches.
$(document).ready(function() {
var v = "#" + window.location.hash.substr(1);
$("#myTab li").each(function() {
var href = $(this).children().first().attr("href");
if (href == v) $(this).addClass("active");
else $(this).removeClass("active");
});
});
//Whenever we click on a li, remove all "active" classes and finally add "active" to the one we clicked.
$("#myTab li").on("click", function() {
$("#myTab li").each(function() {
$(this).removeClass("active");
});
$(this).addClass("active");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab">
<li><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
</ul>
source to share
If you want to keep the value after update, you can use cookie
or sessionStorage
(as pointed out in the comments). SessionStorage will be easier, I think.
$('.tab-pane').click(function(){
sessionStorage.setItem("clicked", $(this).attr('id'));
});
And after refreshing the page, you can get the stored value:
if(sessionStorage.getItem("clicked") != null)
var clickeId = sessionStorage.getItem("clicked")
source to share
That helped..
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var hash = $(e.target).attr('href');
if (history.pushState) {
history.pushState(null, null, hash);
} else {
location.hash = hash;
}
});
var hash = window.location.hash;
if (hash) {
$('.nav-link[href="' + hash + '"]').tab('show');
}
Creates shared links using a URL hash.
source to share