I want to keep the last tab clicked open after reloading the page because for the moment, after reloading the first tab is always open. Can you help me pls?
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>
You can use localstorage
localStorage.setItem('active' , 'true')