Tengo una página que contiene la misma URL pero muchas pestañas después de hacer clic en una pestaña, puedo ver su contenido, pero justo después de actualizar aparece la pestaña (0) de la página, pero quiero la última pestaña utilizada. Cómo puedo hacer eso. este es el codigo js
<script> const tabBtn = document.querySelectorAll(".tab"); const tab = document.querySelectorAll(".tabShow"); function tabs(panelIndex){ tab.forEach(function(node){ node.style.display="none"; }); tab[panelIndex].style.display="block"; } tabs(0); $(".tab").click(function(){ $(this).addClass("active").siblings().removeClass("active"); }); </script>Puede usar los parámetros de almacenamiento de sesión o de consulta (parámetros de búsqueda) o los parámetros hash
Almacenamiento de sesión : puede almacenar algunos valores por claves hasta que se cierre la pestaña
Parámetros hash : los datos se almacenan en la url. Incluso puede guardar la URL en algún lugar o compartirla, y cuando esté abierta, se abrirá la pestaña requerida
Parámetros de consulta : lo mismo que los parámetros hash, pero cuando se modifican, la página completa se actualiza
Solución de almacenamiento de sesiones :
<script> const tabButtons = document.querySelectorAll(".tab"); const tabs = document.querySelectorAll(".tabShow"); const changeTab = (tabIndex) => { sessionStorage.setItem('currentTab', tabIndex); tabs.forEach((node) => { node.style.display = "none"; }); tabButtons.forEach((tb) => tb.classList.remove('active')); tabs[tabIndex].style.display = "block"; tabButtons[tabIndex].classList.add('active'); } tabButtons.forEach((tabButton, index) => { tabButton.onclick = () => changeTab(index) }); changeTab(sessionStorage.getItem('currentTab') || 0); </script>Solución de parámetros hash :
<script> const tabButtons = document.querySelectorAll(".tab"); const tabs = document.querySelectorAll(".tabShow"); const changeTab = (tabIndex) => { window.location.hash=`tab=${tabIndex}`; tabs.forEach((node) => { node.style.display = "none"; }); tabButtons.forEach((tb) => tb.classList.remove('active')); tabs[tabIndex].style.display = "block"; tabButtons[tabIndex].classList.add('active'); } tabButtons.forEach((tabButton, index) => { tabButton.onclick = () => changeTab(index) }); const hash = new URLSearchParams(location.hash.slice(1)); changeTab(hash.get('tab') || 0); </script> Solución de parámetros de consulta
Lo mismo que la solución de parámetros hash, pero con search en lugar de hash
Puede crear una variable que se actualice cada vez que se cambie la pestaña y luego verificar a qué es igual la variable para determinar qué pestaña debe abrirse de forma predeterminada.