Javascript 刷新时维护 bootstrap 数据库5选项卡状态

发布于10月20日

<ul class="nav nav-pills" id="my_tabs">
   <li class="nav-item" role="presentation"> 
     <a class="nav-link active" data-bs-toggle="pill" href="#tab1" aria-selected="true">Tab 1</a> 
   </li>
   <li class="nav-item" role="presentation"> 
     <a class="nav-link" data-bs-toggle="pill" href="#tab2" aria-selected="false">Tab 2</a> 
   </li>
</ul>
      
<section class="tab-content" id="tab-content">
   <div class="tab-pane active" id="tab1" role="tabpanel">
     Tab 1
   </div>
   <div class="tab-pane" id="tab2" role="tabpanel">
     Tab 2
   </div>
</section>

如何在刷新页面后保持活动选项卡？我已经找过了，但没有找到解决方案.先谢谢你.

推荐答案

您将需要使用JavaScript，而不是数据属性.

因此为initiate tab with JavaScript，然后在每次单击时，将活动选项卡ID存储在本地存储中.

在第一次加载时，从本地存储获取活动选项卡ID，并将其激活，或设置默认的活动选项卡ID.

示例

(注意:本地存储在这里不起作用，但它应该在本地起作用，即在允许保存到本地存储的地方):

const triggerTabList = document.querySelectorAll('#my_tabs a');

triggerTabList.forEach(triggerEl => {

  const tabTrigger = new bootstrap.Tab(triggerEl);

  triggerEl.addEventListener('click', event => {

    event.preventDefault();
    tabTrigger.show();

    // save tab target
    localStorage.setItem('active-tab', event.target.getAttribute('href'));

  });
});

// get the active tab id, set default
const activeTabId = localStorage.getItem('active-tab') || '#tab1';

// find the element that triggers the tab
const activeTab = [...triggerTabList].find(el => el.getAttribute('href') === activeTabId);

// click the element to trigger the tab
// in case it's not found, click the first tab
if (activeTab) {
  activeTab.click();
} else {
  triggerTabList[0].click();
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>


<ul class="nav nav-pills" id="my_tabs">
  <li class="nav-item" role="presentation">
    <a class="nav-link" href="#tab1" aria-selected="true">Tab 1</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" href="#tab2" aria-selected="false">Tab 2</a>
  </li>
</ul>

<section class="tab-content" id="tab-content">
  <div class="tab-pane" id="tab1" role="tabpanel">
    Tab 1
  </div>
  <div class="tab-pane" id="tab2" role="tabpanel">
    Tab 2
  </div>
</section>