選中時更改按鈕顏色
[英]Change Button color when selected
問題描述
我有帶有按鈕的HTML輸出。 我希望所選按鈕可以更改顏色，以輕松顯示正在查看的部分。
我試圖做這個線程中的事情，但是沒有運氣。 該功能似乎未使用。
這是一個簡單的HTML頁面，我在其中有一些按鈕，並試圖添加功能focusMe。
<HTML><HEAD>
<STYLE type="text/css">
.btn {
display: inline-block;
border: #2e6da4;
border-style: solid;
border-width: 2px;
width:190px;
height:54px;
border-radius: 6px;
background: linear-gradient(#FFFFFF, #B0B0B0);
font-weight: bold;
color: blue;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
margin-left: 5px;
vertical-align: middle;
}
.btn:hover {
background: linear-gradient(#152B40, #152B40);
color: white
}
.btn:focus {
background: linear-gradient(#152B40, #152B40);
color: white
}
.button-selected {
border: 4px solid red;
}
</STYLE>
<script type="text/javascript">
function focusMe(button) {
document.getElementsByClassName("button-selected")[0].className = "";
button.className = "button-selected";
}
</script>
</HEAD><BODY>
<div>
<button class='btn'>1</button>
<button class='btn'>2</button>
<button class='btn'>3</button>
<button onClick="focusMe(this);" >4</button>
</div>
</BODY></HTML>
我知道前3個按鈕不會更改。 只需在第四個按鈕上嘗試此功能。
謝謝！
3 個解決方案
解決方案1
1 已采納 2015-09-01 21:56:50
從document.getElementsByClassName("button-selected")[0].className = ""引發的錯誤結果中，在第一次單擊button document.getElementsByClassName("button-selected")[0]時未定義，在拋出錯誤時嘗試在不在DOM元素上設置.className 。
在button元素上設置.className之前，嘗試使用if語句檢查是否定義了document.getElementsByClassName("button-selected")[0]
<HTML> <HEAD> <STYLE type="text/css"> .btn { display: inline-block; border: #2e6da4; border-style: solid; border-width: 2px; width: 190px; height: 54px; border-radius: 6px; background: linear-gradient(#FFFFFF, #B0B0B0); font-weight: bold; color: blue; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; margin-left: 5px; vertical-align: middle; } .btn:hover { background: linear-gradient(#152B40, #152B40); color: white } .btn:focus { background: linear-gradient(#152B40, #152B40); color: white } .button-selected { border: 4px solid red; } </STYLE> <script type="text/javascript"> function focusMe(button) { var elem = document.getElementsByClassName("button-selected")[0]; // if element having class `"button-selected"` defined, do stuff if (elem) { elem.className = ""; } button.className = "button-selected"; } </script> </HEAD> <BODY> <div> <button class='btn'>1</button> <button class='btn'>2</button> <button class='btn'>3</button> <button onClick="focusMe(this);">4</button> </div> </BODY> </HTML>
這修復了功能。 即使使用此功能，我也看到了與以前CSS相同的行為，只需單擊一下按鈕，單擊一次額外的單擊即可刪除按鈕的更新CSS。 知道我需要做什么，以便所選按鈕僅在選擇另一個按鈕之前保持更新的顏色嗎？
js不必達到預期的結果。 嘗試使用css選擇器button:not(.btn) :focus偽類來切換border沒有元素的.btn上的點擊類.btn元素
<HTML> <HEAD> <STYLE type="text/css"> .btn { display: inline-block; border: #2e6da4; border-style: solid; border-width: 2px; width: 190px; height: 54px; border-radius: 6px; background: linear-gradient(#FFFFFF, #B0B0B0); font-weight: bold; color: blue; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; margin-left: 5px; vertical-align: middle; } .btn:hover { background: linear-gradient(#152B40, #152B40); color: white } .btn:focus { background: linear-gradient(#152B40, #152B40); color: white } button:not(.btn):focus { border: 4px solid red; } </STYLE> </HEAD> <BODY> <div> <button class='btn'>1</button> <button class='btn'>2</button> <button class='btn'>3</button> <button>4</button> </div> </BODY> </HTML>
解決方案2
0 2015-09-01 21:53:52
使用focus偽類https://developer.mozilla.org/en-US/docs/Web/CSS/:focus
.btn:focus {
border: 4px solid red;
}
解決方案3
-1 2016-08-04 11:42:43
<HTML> <HEAD> <STYLE type="text/css"> .btn { display: inline-block; border: #2e6da4; border-style: solid; border-width: 2px; width: 190px; height: 54px; border-radius: 6px; background: linear-gradient(#FFFFFF, #B0B0B0); font-weight: bold; color: blue; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; margin-left: 5px; vertical-align: middle; } .btn:hover { background: linear-gradient(#152B40, #152B40); color: white } .btn:focus { background: linear-gradient(#152B40, #152B40); color: white } button:not(.btn):focus { border: 4px solid red; } </STYLE> </HEAD> <BODY> <div> <button class='btn'>1</button> <button class='btn'>2</button> <button class='btn'>3</button> <button>4</button> <button>5</button> </div> </BODY> </HTML>
選擇時按鈕顏色更改
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.