我實際上試圖在單擊時將類（選定）添加到標簽并從鄰居標簽中洗掉類。
問題是當有 2 個 div 時它不起作用，下面的代碼僅適用于第一個 Div 或當我單擊第二個標簽的標簽時，第一個活動標簽被洗掉
const menuLis = document.querySelectorAll(".top-nav > label");
for (let label of menuLis) {
label.addEventListener("click", function(){
// 1. Remove Class from All Lis
for (let label of menuLis) {
label.classList.remove('selected');
}
// 2. Add Class to Relevant Li
this.classList.add('selected');
});
}.selected{color:red}<div class="grid-item">
<section>
<div class='top-nav'>
<label>Coffee</label>
<label>Tea</label>
<label>Milk</label>
</div>
</section>
</div>
<br><br>
<div class="grid-item">
<section>
<div class='top-nav'>
<label>Coffee</label>
<label>Tea</label>
<label>Milk</label>
</div>
</section>
</div>謝謝
uj5u.com熱心網友回復：
您正在從menuLis. 您應該獲得當前.top-nav部分中僅包含標簽的串列，并從中洗掉類。
const menuLis = document.querySelectorAll(".top-nav > label");
for (let label of menuLis) {
label.addEventListener("click", function(){
let container = this.closest('.top-nav');
let curMenuLis = container.querySelectorAll("label");
// 1. Remove Class from All Lis
for (let label of curMenuLis) {
label.classList.remove('selected');
}
// 2. Add Class to Relevant Li
this.classList.add('selected');
});
}.selected{color:red}<div class="grid-item">
<section>
<div class='top-nav'>
<label>Coffee</label>
<label>Tea</label>
<label>Milk</label>
</div>
</section>
</div>
<br><br>
<div class="grid-item">
<section>
<div class='top-nav'>
<label>Coffee</label>
<label>Tea</label>
<label>Milk</label>
</div>
</section>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/357919.html
標籤：javascript html css
下一篇：使用來自節點js的ajax變數