使用本地存储在引导程序 4 中保持页面刷新的活动选项卡？

Posted 2023-03-05

【中文标题】使用本地存储在引导程序 4 中保持页面刷新的活动选项卡？

【英文标题】：Keep active tab on page refresh in bootstrap 4 using local storage?

【发布时间】：2018-10-29 14:14:23

【问题描述】：

我正在尝试在页面刷新时保持选定的选项卡处于活动状态。但是当我在 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> 

【问题讨论】：

你可以使用localStorage

***.com/questions/18999501/…的可能重复

我在 *** 上尝试了解决方案，但所有解决方案都适用于 bootstrap 3，但是当我尝试使用 bootstrap 4 时它不起作用。

请有人给我上述代码的解决方案。

Bootstrap 3: Keep selected tab on page refresh的可能重复

【参考方案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');

【讨论】：

非常感谢它非常适合我。还有导致问题的js。我更改了 js，它非常适合我。

tutorialrepublic.com/faq/…