我正在使用此代碼來激活當前元素。我在“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>uj5u.com熱心網友回復：
我解決了你的問題，試試這個
<!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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/338339.html
標籤：javascript html css