如何使用Bootstrap5.2保持活動選項卡的焦點

我看到了有關在 Bootstrap 4 及更低版本中重繪 瀏覽器后如何保留活動選項卡焦點的示例，但對于 Bootstrap 5 則沒有。

使用 Bootstrap 5 選項卡時，我無法使用 Bootstrap 4 中的示例。

HTML

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target=

"#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
    </li>
</ul>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">Home tab content</div>
    <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">Profile tab content</div>
    <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">Contact tab content</div>
</div>

jQuery

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

https://jsfiddle.net/0czektof/2/

uj5u.com熱心網友回復：

與 Bootstrap 4 相比，Bootstrap 5 發生了很大變化。

使用Bootstrap 5中的示例。

您的代碼中存在一些與您使用舊版本示例相關的錯誤。

• 您的 querySelector 使用a-elements，但您的 HTML 使用button-elements。
• 您使用了錯誤的屬性選擇器。Bootstrap 5data-bs-toggle不使用data-toggle.
• Bootstrap 5 不再添加 .tab() 函式。它使用他自己的全域物件來管理東西。

顯示代碼片段

$(document).ready(function() {
  $('button[data-bs-toggle="tab"]').on('click', function(e) {
    try {
      localStorage.setItem('activeTab', e.target.dataset.bsTarget);
    } catch (e) {
      console.log("localstorage is not allowed in code snippets here test it on jsfiddle");
    }
  });
  try {
    var activeTab = localStorage.getItem('activeTab');
  } catch (e) {
    console.log("localstorage is not allowed in code snippets here test it on jsfiddle");
  }
  if (activeTab) {
    const triggerEL = document.querySelector(`button[data-bs-target="${activeTab}"]`);
    if (triggerEl) {
      bootstrap.Tab.getOrCreateInstance(triggerEL).show()
    }
  }
});

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
</ul>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">Home tab content</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">Profile tab content</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">Contact tab content</div>
</div>

這是一個作業小提琴。

標籤：javascript jQuery 推特引导

上一篇：如何從可折疊按鈕中讀取完整的引導類并對其進行自定義？

下一篇：為什么我在VStudio2019標準專案模板中得到這個損壞的Bootstrap輪播？