我有兩個 ul 具有相同的類，我試圖實現的概念是單擊活動 li 時應該更改邊框顏色。我已經成功了，我需要的概念是我希望在第一個 ul li 上顯示默認的相同邊框顏色，如果我點擊其他，它應該被刪除，並且顏色應該應用於點擊的一個。到目前為止我嘗試過的代碼。
任何幫助將不勝感激 ！！
var x = document.querySelectorAll('.random-value li');
for (var i = 0; i < x.length; i++) {
x[i].addEventListener("click", function() {
var selectedEl = document.querySelector(".selected");
if (selectedEl) {
selectedEl.classList.remove("selected");
}
this.classList.add("selected");
}, false);
};.random-value li{
margin: 0 0 15px 0;
border: 1px solid green;
padding: 15px 26px;
}
.random-value .selected{
border: 1px solid red;
}<ul id="first" class="random-value">
<li>200 </li>
<li>2010 </li>
<li>2100 </li>
<li>2030 </li>
</ul>我想這就是你要找的
//Making first option as Highlighted
document.querySelectorAll('.random-value li')[0].classList.add("selected");
var x = document.querySelectorAll('.random-value li');
for (var i = 0; i < x.length; i++) {
x[i].addEventListener("click", function() {
var selectedEl = document.querySelector(".selected");
if (selectedEl) {
selectedEl.classList.remove("selected");
}
this.classList.add("selected");
}, false);
};.random-value li{
margin: 0 0 15px 0;
border: 1px solid green;
padding: 15px 26px;
}
.random-value .selected{
border: 1px solid red;
}<ul id="first" class="random-value">
<li>200 </li>
<li>2010 </li>
<li>2100 </li>
<li>2030 </li>
</ul>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句