即使刷新后，如何使元素仍然处于活动状态保持活动状态？

Question

我正在使用此代码来激活当前元素。 我在“w3schools.com”上找到了这个代码。 在这段代码中，如果我刷新，当前活动的元素就会消失。 即使刷新后仍处于活动状态的元素如何保持活动状态？

 // 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>

Answer 1

我解决了你的问题，试试这个

<!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>

即使刷新后，如何使元素仍然处于活动状态保持活动状态？

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-10-27 09:57:16

即使刷新后，如何使元素仍然处于活动状态保持活动状态？

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-10-27 09:57:16

解决方案1
1 已采纳 2021-10-27 09:57:16