Estoy tratando de mantener activa la pestaña seleccionada al actualizar con css y js. Intenté y verifiqué con algunas preguntas que ya se hicieron aquí, pero ninguna me funcionó. No se que hacer. código HTML:
<div class="container"> <div class="title">Machine learning : Prediction ET0 </div> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'daily')" id="defaultOpen">Journalier</button> <button class="tablinks" onclick="openCity(event, 'hourly')">Horaire</button> <button class="tablinks" onclick="openCity(event, 'Exdaily')">Excel journalier</button> <button class="tablinks" onclick="openCity(event, 'Exhourly')">Excel Horaire</button> </div> <script> function openCity(evt, data) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(data).style.display = "block"; evt.currentTarget.className += " active"; } </script>Debe guardar la información sobre qué pestaña debe estar activa (o si una pestaña debe estar activa) en algún lugar al que el navegador pueda acceder. Hay varias formas de lograr esto a través del almacenamiento del lado del cliente .
Recomendaría guardar los datos en los navegadores localStorage :
// Execute this when a tab is clicked. `index` is the index of the clicked tab // but you are free to use whatever identifier you like. window.localStorage.setItem('activeTabIndex', index); Nota: Guardar el index podría no ser el mejor enfoque ya que el orden de las pestañas podría cambiar. Trate de encontrar un identificador que sea único y que sea poco probable que cambie.
Luego, en la carga de la página, recupere los datos guardados y "active" la pestaña respectiva:
const activeTabIndex = window.localStorage.getItem('activeTabIndex'); if (activeTabIndex) { // localStorage values are saved as strings so we have // to convert `activeTabIndex` to a number first. document.querySelectorAll('.tablinks')[Number(activeTabIndex)].classList.add('active'); }Puede usar el almacenamiento local para almacenar la pestaña activa y la función de llamada en la recarga de la página y establecer la identificación del botón con la cadena de datos de la pestaña.
<div class="container"> <div class="title">Machine learning : Prediction ET0 </div> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'daily')" id="daily">Journalier</button> <button class="tablinks" onclick="openCity(event, 'hourly')" id="hourly">Horaire</button> <button class="tablinks" onclick="openCity(event, 'Exdaily')" id="Exdaily">Excel journalier</button> <button class="tablinks" onclick="openCity(event, 'Exhourly')" id="Exhourly">Excel Horaire</button> </div> window.onload = function () { const activeTab = localStorage.getItem("activeTab"); if(activeTab){ // here your logic comes to show that specific tab add or remove class } }Establezca la pestaña actual en la función de evento de clic como esta
localStorage.setItem("activeTab",data);Comenta abajo para cualquier consulta gracias