使用本地存儲在引導程序 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');
}

Answer 2

無法在 bootstrap 5 選項卡中工作，請幫忙。 在控制台中顯示。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>