Quiero mantener abierta la última pestaña en la que se hizo clic después de recargar la página porque, por el momento, después de recargar, la primera pestaña siempre está abierta. ¿Me pueden ayudar por favor?
JavaScript:
const onglets = document.querySelectorAll('.onglets'); const contenu = document.querySelectorAll('.contenu'); let index = 0; onglets.forEach(onglet => { onglet.addEventListener('click', () => { if (onglet.classList.contains('active')) { return; } else { onglet.classList.add('active'); } index = onglet.getAttribute('data-anim'); for (i = 0; i < onglets.length; i++) { if (onglets[i].getAttribute('data-anim') != index) { onglets[i].classList.remove('active'); } else { onglets[i].classList.add('activeContenu'); } } for (let i = 0; i < onglets.length; i++) { if (onglets[i].classList.contains('active')) { console.log(i); } } for (j = 0; j < contenu.length; j++) { if (contenu[j].getAttribute('data-anim') == index) { contenu[j].classList.add('activeContenu'); contenu[j].removeAttribute('hidden'); } else { contenu[j].classList.remove('activeContenu'); contenu[j].setAttribute('hidden', "") } } }) }) <div class="container-onglets"> <div class="onglets active" data-anim="1">Statut</div> <div class="onglets" data-anim="2">Fonction</div> <div class="onglets " data-anim="3">Contact</div> </div> <div class="contenu activeContenu" data-anim="1"> content </div> <div class="contenu" data-anim="2" hidden> content </div> <div class="contenu " data-anim="3" hidden> content </div>Puedes usar el almacenamiento local
localStorage.setItem('active' , 'true')