javascript - 使用本地存储在 bootstrap 4 中保持页面刷新的事件选项卡？

Question

我试图在页面刷新时使选定的选项卡保持事件状态。但是当我无法在 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> 

Answer 1

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');
}