Permanecer en la misma pestaña después de actualizar
después de actualizar la página aparece text1 (porque su estilo en css se define como display:block) pero quiero la última pestaña utilizada. Cómo puedo hacer eso. este es el codigo jsp
<button class="btn special" id="cl1" value="Мій профіль" onclick="tabs()" >Мій профіль</button> <button class="btn" id="cl2" value="Заявки" onclick="tabs()">Мої запити</button> <button class="btn" id="cl3" value="Створити запит" onclick="tabs()">Створити запит</button> <div class="tabShow"id="firstoption"> один </div> <div class="tabShow"id="secondoption"> два </div> <div class="tabShow"id="thirdoption"> три </div> <script> function tabs(){ const btnop1=document.getElementById("cl1"); const btnop2=document.getElementById("cl2"); const btnop3=document.getElementById("cl3"); const text1=document.getElementById("firstoption"); const text2=document.getElementById("secondoption"); const text3=document.getElementById("thirdoption"); btnop1.onclick=function (){ text3.style.display="none"; text2.style.display="none"; text1.style.display="block"; } btnop2.onclick=function (){ text1.style.display="none"; text3.style.display="none"; text2.style.display="block"; } btnop3.onclick=function (){ text1.style.display="none"; text2.style.display="none"; text3.style.display="block"; } </script>Al volver a cargar la pestaña, los cambios que realizó en el CSS de forma dinámica desaparecen. Si desea persistencia, deberá usar algo como localStorage para guardar el estado al presionar un botón y cargar el estado cuando se cargue su página.
Debe usar algo como el localstorage para conservar cualquier variable después de las recargas
HTML
<button class="btn special" id="cl1" value="Мій профіль" onclick="tabs()"> Мій профіль </button> <button class="btn" id="cl2" value="Заявки" onclick="tabs()"> Мої запити </button> <button class="btn" id="cl3" value="Створити запит" onclick="tabs()"> Створити запит </button> <div class="tabShow" id="firstoption"> один </div> <div class="tabShow" id="secondoption"> два </div> <div class="tabShow" id="thirdoption"> три </div>JavaScript:
const text1 = document.getElementById('firstoption') const text2 = document.getElementById('secondoption') const text3 = document.getElementById('thirdoption') const textStyles = JSON.parse(localStorage.getItem('textStyles')) text3.style.display = textStyles.text3 text2.style.display = textStyles.text2 text1.style.display = textStyles.text1 function tabs() { const btnop1 = document.getElementById('cl1') const btnop2 = document.getElementById('cl2') const btnop3 = document.getElementById('cl3') btnop1.onclick = function() { text3.style.display = 'none' text2.style.display = 'none' text1.style.display = 'block' localStorage.setItem('textStyles', JSON.stringify({ text3: text3.style.display, text2: text2.style.display, text1: text1.style.display })) } btnop2.onclick = function() { text1.style.display = 'none' text3.style.display = 'none' text2.style.display = 'block' localStorage.setItem('textStyles', JSON.stringify({ text3: text3.style.display, text2: text2.style.display, text1: text1.style.display })) } btnop3.onclick = function() { text1.style.display = 'none' text2.style.display = 'none' text3.style.display = 'block' localStorage.setItem('textStyles', JSON.stringify({ text3: text3.style.display, text2: text2.style.display, text1: text1.style.display })) } }Creo que puede lograr esto con la interfaz de historial de JavaScript , donde guardaría el estado actual de la ruta utilizando los métodos de Historia.