Estoy usando este código para activar el elemento actual. Encontré este código en "w3schools.com". en este código, si actualizo, el elemento actualmente activo desaparece. ¿Cómo se puede mantener activo el elemento que todavía está activo incluso después de la actualización?
// Add active class to the current button (highlight it) var header = document.getElementById("myDIV"); var btns = header.getElementsByClassName("btn"); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function() { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); } /* Style the buttons */ .btn { border: none; outline: none; padding: 10px 16px; background-color: #f1f1f1; cursor: pointer; font-size: 18px; } /* Style the active class, and buttons on mouse-over */ .active, .btn:hover { background-color: #666; color: white; } <h1>Active Button</h1> <p>Highlight the active/current (pressed) button.</p> <div id="myDIV"> <button class="btn">1</button> <button class="btn active">2</button> <button class="btn">3</button> <button class="btn">4</button> <button class="btn">5</button> </div>Resolví tu problema, prueba esto
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* Style the buttons */ .btn { border: none; outline: none; padding: 10px 16px; background-color: #f1f1f1; cursor: pointer; font-size: 18px; } /* Style the active class, and buttons on mouse-over */ .active, .btn:hover { background-color: #666; color: white; } </style> </head> <body> <h1>Active Button</h1> <p>Highlight the active/current (pressed) button.</p> <div id="myDIV"> <button class="btn">1</button> <button class="btn active">2</button> <button class="btn">3</button> <button class="btn">4</button> <button class="btn">5</button> </div> <script> var header = document.getElementById("myDIV"); var btns = header.getElementsByClassName("btn"); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener('click', function(e){ var current = document.getElementsByClassName("active"); current[0].classList.remove('active'); this.classList.add('active'); var array = []; array.push(btns); localStorage.setItem('element', this.innerText); }); } function setActivatedItem(){ var item = localStorage.getItem('element'); if(item){ for (var a = 0; a < btns.length; a++) { if(btns[a].innerText == item){ btns[a].classList.add('active'); }else{ btns[a].classList.remove('active'); } } } } window.onload == setActivatedItem(); </script> </body> </html>