^我希望一次只能啟用一種樣式。
^我能夠做到這一點，我不希望用戶能夠做到這一點。
因此，要提出一個可能是簡單解決方案的問題是非常困難的。我基本上有一個構建版本串列，我希望用戶在其中選擇一個。選擇其中一個版本時，它會將邊框添加到專案中以顯示其單擊。但是，現在使用我的代碼，用戶可以選擇所有 3 個專案并啟用它們的 CSS 元素。我希望用戶只能“激活”串列中的一項。
HTML 和 CSS：
<ul class="listContents">
<li><p><a href="#" class="links">Stable</a></p></li>
<li><p><a href="#" class="links">Preview</a></p></li>
<li><p><a href="#" class="links">LTS</a></p></li>
</ul>
<style>
.colorText {
background-color: #58a7ed;
color: white;
}
</style>
和 JS 的東西：
const btn = document.querySelectorAll('.links');
for (let i = 0; i < btn.length; i ) {
btn[i].addEventListener("click", function() {
btn[i].classList.add('colorText')
})
}
我真的希望我說清楚了，我覺得我的英語在嘗試正確表達這個詞時失敗了，哈哈。
uj5u.com熱心網友回復：
您還可以使用forEach回圈，訪問點擊的鏈接使用event.target
const btns = document.querySelectorAll('.links');
btns.forEach(btn => {
btn.addEventListener('click', e => {
// remove any existing active links
btns.forEach(b => b.classList.remove('colorText'));
// activate the clicked link
e.target.classList.add('colorText');
})
});.colorText {
background-color: #58a7ed;
color: white;
}<ul class="listContents">
<li>
<p><a href="#" class="links">Stable</a></p>
</li>
<li>
<p><a href="#" class="links">Preview</a></p>
</li>
<li>
<p><a href="#" class="links">LTS</a></p>
</li>
</ul>uj5u.com熱心網友回復：
就在您將 colorText 類添加到所需專案之前，我們可以從所有專案中洗掉 colorText，確保一次只有 1 個獲得該類。
// the rest is the same...
btn[i].addEventListener("click", function() {
// remove it from all:
btn.forEach(function(item) {
item.classList.remove('colorText');
});
// add it back to the desired one
btn[i].classList.add('colorText')
})
uj5u.com熱心網友回復：
你也可以使用簡單的
const btn = document.querySelectorAll(".links");
for (let bt of btn) {
bt.addEventListener("click", (e) => {
btn.forEach((b) => b.classList.remove("colorText"));
e.target.classList.add("colorText");
});
}轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/430252.html
標籤：javascript html css 列表 查询选择器