I see examples on how to retain an active tab's focus after refreshing the browser in Bootstrap 4 and below, but nothing for Bootstrap 5.

I'm not able to use the examples from Bootstrap 4 when using Bootstrap 5 tabs.

HTML

<ul  id="myTab" role="tablist">
<li  role="presentation">
    <button  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  role="presentation">
        <button  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  role="presentation">
        <button  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  id="myTabContent">
    <div  id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">Home tab content</div>
    <div  id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">Profile tab content</div>
    <div  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/

CodePudding user response：

Bootstrap 5 changed a lot compared to Bootstrap 4.

Make use of the example from Bootstrap 5.

There are some errors in your code related to the fact that you used an example of an older version.

• Your querySelector uses a-elements but your HTML makes use of button-elements.
• You use a wrong attribute selector. Bootstrap 5 uses data-bs-toggle not data-toggle.
• Bootstrap 5 doesn't add .tab() function anymore. It uses his own global object to manage stuff.

$(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  id="myTab" role="tablist">
  <li  role="presentation">
    <button  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  role="presentation">
    <button  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  role="presentation">
    <button  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  id="myTabContent">
  <div  id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">Home tab content</div>
  <div  id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">Profile tab content</div>
  <div  id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">Contact tab content</div>
</div>

Here is a working fiddle.