Cuando refresco la página no se queda cliqueado en el menú seleccionado. Estoy usando tabs de bootstrap5 y js, no quiero usar jquery.
MENU TABS
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item" role="presentation">
<a href="#tab1" class="nav-link active" data-bs-toggle="tab" >Home</a>
</li>
<li class="nav-item" role="presentation">
<a href="#tab2" class="nav-link" data-bs-toggle="tab" >Profile</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">...</div>
<div class="tab-pane" id="tab2">...</div>
</div>
JAVASCRIPT
document.addEventListener('DOMContentLoaded', () => {
var tabEl = [].slice.call(document.querySelector('a[data-bs-toggle="tab"]'));
tabEl.forEach(function(tab) {
tab.addEventListener("click", function(e) {
e.preventDefault();
localStorage.setItem('activeTab', e.target.getAttribute('href'));
var activeTab = localStorage.getItem('activeTab');
var mitab = document.querySelector('a[href="' + activeTab + '"]');
mitab.addEventListener('shown.bs.tab', function(event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
//event.target.tab('show')
event.target.show()
})
});
});
})
Nota: al utilizar localstorage no logro que la clave "active" se quede activada; cuando refresco la página se regresa al principio.