使用本地存储在bootstrap 4中保持页面刷新活动标签? [英] Keep active tab on page refresh in bootstrap 4 using local storage?
本文介绍了使用本地存储在bootstrap 4中保持页面刷新活动标签?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在页面刷新时保持选定的标签处于活动状态。但是当我无法在bootstrap 4中找到任何选项卡的解决方案时。我试图根据bootstrap 3解决方案进行更改,但没有任何效果。请帮帮我。
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. please help me.
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>
这是我正在使用的js,但它不起作用。
this is js i am using but it dosen't work.
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>
推荐答案
jQuery选择器错误: $('#myTab a [href ='+ activeTab +']')
,它应该是......
The jQuery selector is wrong: $('#myTab a[href="' + activeTab + '"]')
, it should be...
$('。nav-tabs a [href ='+ activeTab +']')。tab('show');
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');
}
这篇关于使用本地存储在bootstrap 4中保持页面刷新活动标签?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文