选中时更改按钮颜色
[英]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.