我正在尝试使选定的选项卡在页面刷新时保持活动状态.但是,当我无法在Bootstrap 4中找到选项卡的任何解决方案时,我尝试根据Bootstrap 3解决方案进行更改,但没有任何效果.请帮我.
的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,但是没有用.
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’”]’),应该是…
$(‘.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');
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。