已解決430363個問題，去搜搜看，總會有你想問的

選擇時更改背景

首頁猿問選擇時更改背景

選擇時更改背景

JavaScript

鳳凰求蠱 2021-10-14 17:01:11

我正在嘗試引導程序，但似乎卡住了。我有一些單選按鈕，但我想要的是在未選擇時勾勒出輪廓，并在選擇時顯示為實心或“btn-primary”。我可以嘗試用 JavaScript 來做機智，但我可能必須給每個人一個單獨的 ID，然后從那里開始。我確信 JavaScript 有更好的方法 <div class="row"> <div class="col offset-md-2"> <div class="form-group"> <div class="btn-group"> <button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button> <button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button> <button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button> <button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button> <button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button> <button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button> <button type="button" class="btn btn-outline-secondary" id="bush">Bush</button> </div> </div> </div> </div>

查看完整描述

2 回答

茅侃侃

TA貢獻1842條經驗獲得超22個贊

如果您想使用純 JavaScript 實現這一點，您可以為每個元素綁定一個點擊處理程序。單擊按鈕時，處理程序將修改元素的類：

var buttons = document.getElementsByTagName("button");

for (var i = 0; i < buttons.length; i++) {

buttons[i].onclick = function() {

this.classList.remove('btn-outline-secondary');

this.classList.add('btn-primary');

}

.btn-outline-secondary {border: 1px solid #aaa;}

.btn-primary {border: 1px solid blue; background: blue; color: white;}

</div>

有關在沒有框架的情況下綁定事件和更改元素類的更多信息，請參閱這兩個答案。

替代

如果您愿意使用諸如 jQuery 之類的庫，那么綁定事件處理程序可能會簡單得多。包含 jQuery 庫后，您的代碼將是：

$("button").click(function(){ /*apply new class using .removeClass() and .addClass() methods*/ });

有關.click() 的更多信息，請參閱jQuery 文檔。

反對回復 2021-10-14

2 回答
0 關注
178 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

選擇時更改背景

選擇時更改背景

2 回答

添加回答