How to Retain an Active Tab's Focus with Bootstrap 5.2

Question

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



    
    
    
        
    
    
        
    



    Home tab content
    Profile tab content
    Contact tab content

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/

user8MeH · Answer

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






  
    
  
  
    
  
  
    
  



  Home tab content
  Profile tab content
  Contact tab content

Here is a working fiddle.

How to Retain an Active Tab's Focus with Bootstrap 5.2

1 Answers