[英]Keep active tab on page refresh in bootstrap 4 using local storage?
I am trying to keep selected tab active on page refresh.我试图在页面刷新时保持选定的选项卡处于活动状态。 but when i am not able to find any solution for tabs in bootstrap 4. i tried to make changes according to bootstrap 3 solutions but nothing work.但是当我在 bootstrap 4 中找不到任何选项卡的解决方案时。我尝试根据 bootstrap 3 解决方案进行更改,但没有任何效果。 please help me.请帮我。
HTML HTML
<ul class="nav my-nav1 nav-tabs mt-3 " id="myTab" role="tablist">
<li class="nav-item border border-secondary rounded">
<a class="nav-link active" data-toggle="tab" href="#menu1">MENU1</a>
</li>
<li class="nav-item border border-secondary rounded">
<a class="nav-link " data-toggle="tab" href="#menu2">MENU2</a>
</li>
</ul>
this is js i am using but it dosen't work.这是我正在使用的 js,但它不起作用。
JS JS
<script type="text/javascript">
$(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>
The jQuery selector is wrong: $('#myTab a[href="' + activeTab + '"]')
, it should be... jQuery选择器是错误的: $('#myTab a[href="' + activeTab + '"]')
,它应该是......
$('.nav-tabs a[href="' + activeTab + '"]').tab('show');
https://www.codeply.com/go/C2B3mcrgSJ https://www.codeply.com/go/C2B3mcrgSJ
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('.nav-tabs a[href="' + activeTab + '"]').tab('show');
}
not working in the bootstrap 5 tab please help.无法在 bootstrap 5 选项卡中工作,请帮忙。 in console it is showing.tab is not a function this is my script在控制台中显示。tab 不是 function 这是我的脚本
<script> $('a[data-bs-toggle="pill"]').on('shown.bs.tab', function (e) {
console.log("tab shown...");
localStorage.setItem('activeTab', $(e.target).attr('href')); });
// read hash from page load and change tab var activeTab = localStorage.getItem('activeTab'); if(activeTab){
$('.nav-pills a[href="' + activeTab + '"]').tab('show'); } </script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.