在我的代码中，我有三个按钮（input type="button"）我用来选择不同的div。它们的作用类似于切换按钮（开/关）。
在过去，当按下按钮或重置按钮时，我会使用图像来显示，但我现在想用css来做。我只是不确定如何达到效果。
选择按钮时还需要禁用边框高亮显示。
我已经找到了这方面的例子，但一无所获。
编辑：
行。我现在可以展示一些东西。代码在某种程度上有效。当我按住鼠标按钮时，它显示出凹陷的外观，但是一旦我释放它就会恢复正常而不是保持按下状态。
我删除了不属于此问题的无关代码，以避免混淆。
编辑2：
我注意到（在FireFox中，不确定其他浏览器）按钮的默认外观在单击按钮时显示按下的外观，但在释放鼠标按钮时恢复正常。我想在释放鼠标按钮后保留按下的外观，直到再次单击该按钮，或者直到单击其他按钮为止。
input:hover { color: teal; }
.push:active { background: gray; color: aquamarine; }
.push:inactive { background: white; color: teal; } <INPUT type="button" class="push" style="font-weight: bold;">
<INPUT type="button" class="push" style="font-weight: bold;">
<INPUT type="button" class="push" style="font-weight: bold;">
编辑最终：
感谢所有帮助我解决此问题的人。我找到了一个更好的解决方案用于我的目的。以下是代码的最终版本。在这个版本中，我只是在单击按钮时更改字体颜色，单击一次时更改为蓝色，如果单击其他按钮则为黑色或第二次单击相同按钮。我是在javascript中做的一切。在修复中，我的翻转highlite破了，修复是使用onMouseOver和onMouseOut而不是使用：hover in head中的样式标记。有趣的是，当我将其粘贴到片段运行器并将javascript与html分开时，它似乎不想工作。
翻转有效，但当我将鼠标移开时，所选按钮不会显示蓝绿色字母。无论如何，代码在这里是为了那些想要玩它的人。
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Sample Solution Page</TITLE>
<SCRIPT type="text/javascript">
<!--
function visInvis(id,id1,id2,id3,id4,id5,id6) {
var a = document.getElementById('mySol');
var a1 = document.getElementById('MM');
var a2 = document.getElementById('MP');
var a3 = document.getElementById('MBL');
var a4 = document.getElementById('MBC');
var a5 = document.getElementById('MPS');
var a6 = document.getElementById('MPL');
var b = document.getElementById('YASS');
var b1 = document.getElementById('YM');
var b2 = document.getElementById('YP');
var b3 = document.getElementById('YBL');
var b4 = document.getElementById('YBC');
var b5 = document.getElementById('YPS');
var b6 = document.getElementById('YPL');
var c = document.getElementById('Tak');
var c1 = document.getElementById('TM');
var c2 = document.getElementById('TP');
var c3 = document.getElementById('TBL');
var c4 = document.getElementById('TBC');
var c5 = document.getElementById('TPS');
var c6 = document.getElementById('TPL');
var d;
var d1 = document.getElementById('MS');
var d2 = document.getElementById('YS');
var d3 = document.getElementById('TS');
var e = document.getElementById(id);
var e1 = document.getElementById(id1);
var e2 = document.getElementById(id2);
var e3 = document.getElementById(id3);
var e4 = document.getElementById(id4);
var e5 = document.getElementById(id5);
var e6 = document.getElementById(id6);
if(e == a && e.style.display == 'none') {
d = d1;
b.style.display = 'none';
b1.style.display = 'none';
b2.style.display = 'none';
b3.style.display = 'none';
b4.style.display = 'none';
b5.style.display = 'none';
b6.style.display = 'none';
d2.style.color = 'black';
c.style.display = 'none';
c1.style.display = 'none';
c2.style.display = 'none';
c3.style.display = 'none';
c4.style.display = 'none';
c5.style.display = 'none';
c6.style.display = 'none';
d3.style.color = 'black';
}
if(e == b && e.style.display == 'none') {
d = d2;
a.style.display = 'none';
a1.style.display = 'none';
a2.style.display = 'none';
a3.style.display = 'none';
a4.style.display = 'none';
a5.style.display = 'none';
a6.style.display = 'none';
d1.style.color = 'black';
c.style.display = 'none';
c1.style.display = 'none';
c2.style.display = 'none';
c3.style.display = 'none';
c4.style.display = 'none';
c5.style.display = 'none';
c6.style.display = 'none';
d3.style.color = 'black';
}
if(e == c && e.style.display == 'none') {
d = d3;
a.style.display = 'none';
a1.style.display = 'none';
a2.style.display = 'none';
a3.style.display = 'none';
a4.style.display = 'none';
a5.style.display = 'none';
a6.style.display = 'none';
d1.style.color = 'black';
b.style.display = 'none';
b1.style.display = 'none';
b2.style.display = 'none';
b3.style.display = 'none';
b4.style.display = 'none';
b5.style.display = 'none';
b6.style.display = 'none';
d2.style.color = 'black';
}
if(e == a && e.style.display == 'block')
d = d1;
if(e == b && e.style.display == 'block')
d = d2;
if(e == c && e.style.display == 'block')
d = d3;
if(e.style.display == 'block') {
e.style.display = 'none';
e1.style.display = 'none';
e2.style.display = 'none';
e3.style.display = 'none';
e4.style.display = 'none';
e5.style.display = 'none';
e6.style.display = 'none';
d.style.color = 'black';
}
else {
e.style.display = 'block';
e1.style.display = 'block';
e2.style.display = 'block';
e3.style.display = 'block';
e4.style.display = 'block';
e5.style.display = 'block';
e6.style.display = 'block';
d.style.color = 'teal';
}
}
function selectText(divID) //divID contains actual id of ‘div’ element
{
var textC=document.getElementById(divID);
if (document.selection)
{
//Portion for IE
var div = document.body.createTextRange();
div.moveToElementText(textC);
div.select();
}
else
{
//Portion for FF
var div = document.createRange();
div.setStartBefore(textC);
div.setEndAfter(textC);
window.getSelection().addRange(div);
}
}
-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE style="float: left; vertical-align: top; width: 17%;">
<TR><TH style="text-align: left; width: 65%;">Collection:</TH><TH style="width: 35%;">Revenge</TH></TR>
<TR><TH style="text-align: left;">Level #:</TH><TH style="width: 30%;">1</TH></TR>
<TR><TH style="text-align: left; vertical-align: top; height: 49.5pt;" colspan="2">Puzzle Name</TH></TR>
<TR><TD colspan="2"><HR></TD></TR>
<TR><TD>Width:</TD><TH style="width: 30%;">0</TH></TR>
<TR><TD>Height:</TD><TH style="width: 30%;">0</TH></TR>
<TR><TD>Boxes/Goals:</TD><TH style="width: 30%;">0</TH></TR>
<TR><TD colspan="2"><HR></TD></TR>
<TR><TD colspan="2" style="text-align: center;"><INPUT type="button" id=MS
style="font-weight: bold;" onMouseOver="this.style.color='teal'"
onMouseOut="this.style.color='black'"
onClick="visInvis('mySol','MM','MP','MBL','MBC','MPS','MPL');
selectText('mySol');" value="My Solution"></TD></TR>
<TR><TD colspan="2" style="text-align: center;"><INPUT type="button" id=YS
style="font-weight: bold;" onMouseOver="this.style.color='teal'"
onMouseOut="this.style.color='black'"
onClick="visInvis('YASS','YM','YP','YBL','YBC','YPS','YPL');
selectText('YASS');" value="YASS Solution"></TD></TR>
<TR><TD colspan="2" style="text-align: center;"><INPUT type="button" id=TS
style="font-weight: bold;" onMouseOver="this.style.color='teal'"
onMouseOut="this.style.color='black'"
onClick="visInvis('Tak','TM','TP','TBL','TBC','TPS','TPL');
selectText('Tak');" value="Takaken Solution"></TD></TR>
<TR><TD colspan="2"><HR></TD></TR>
<TR><TD>Moves:</TD><TH style="width: 30%;">
<DIV id=MM style="display: none;">0</DIV>
<DIV id=YM style="display: none;">0</DIV>
<DIV id=TM style="display: none;">0</DIV></TH></TR>
<TR><TD>Pushes:</TD><TH style="width: 30%;">
<DIV id=MP style="display: none;">0</DIV>
<DIV id=YP style="display: none;">0</DIV>
<DIV id=TP style="display: none;">0</DIV></TH></TR>
<TR><TD>Box lines:</TD><TH style="width: 30%;">
<DIV id=MBL style="display: none;">0</DIV>
<DIV id=YBL style="display: none;">0</DIV>
<DIV id=TBL style="display: none;">0</DIV></TH></TR>
<TR><TD>Box changes:</TD><TH style="width: 30%;">
<DIV id=MBC style="display: none;">0</DIV>
<DIV id=YBC style="display: none;">0</DIV>
<DIV id=TBC style="display: none;">0</DIV></TH></TR>
<TR><TD>Pushing sessions:</TD><TH style="width: 30%;">
<DIV id=MPS style="display: none;">0</DIV>
<DIV id=YPS style="display: none;">0</DIV>
<DIV id=TPS style="display: none;">0</DIV></TH></TR>
<TR><TD>Pusher lines:</TD><TH style="width: 30%;">
<DIV id=MPL style="display: none;">0</DIV>
<DIV id=YPL style="display: none;">0</DIV>
<DIV id=TPL style="display: none;">0</DIV></TH></TR>
<TR><TD colspan="2"><HR></TD></TR>
<TR><TD colspan="2">Inactive button means no solution available. Some puzzles YASS cannot solve,
some Takaken cannot solve, and some I have not solved.</TD></TR>
</TABLE>
<TABLE style="float: right; border: 1px solid; border-spacing: 0px; padding: 3px; vertical-align: top;
width: 42%; height: 650px;">
<CAPTION style="align: top; text-align: left; font-weight: bold;">Solution</CAPTION>
<TR><TD style="vertical-align: top;">
<DIV id=mySol style="display: none; width: 520px; height: 640px; word-wrap: break-word;
overflow: auto;">My Solution</DIV>
<DIV id=YASS style="display: none; width: 520px; height: 640px; word-wrap: break-word;
overflow: auto;">YASS Solution</DIV>
<DIV id=Tak style="display: none; width: 520px; height: 640px; word-wrap: break-word;
overflow: auto;">Takaken Solution</DIV>
</TD></TR>
</TABLE>
<TABLE style="float: center; border: 1px solid; border-spacing: 0px; padding: 3px; vertical-align: top;
width: 40.3%; height: 650px;">
<CAPTION style="align: top; text-align: left; font-weight: bold;">Puzzle</CAPTION>
<TR><TD>
<PRE style="text-align: center;"></PRE>
</TD></TR>
</TABLE>
</BODY>
</HTML>
`
答案 0 :(得分：0)
我认为你所寻找的是一种在点击按钮时改变按钮外观的方法。
你可以做的是在你的css样式表上创建两个css类，一个用于活动按钮，另一个用于非活动按钮。
您的页面以确定状态的按钮开始，因此您可以使用对应的类
创建它们在您的客户端代码上，单击一个按钮时，您只需更改它的类名，从活动状态更改为非活动状态，反之亦然。
Etvoilá单击按钮时将应用您的样式
答案 1 :(得分：0)
如果您想要一个纯粹的HTML和CSS解决方案，您实际上可以使用一个样式的复选框看起来像一个按钮。像这样：
<input type="checkbox" id="input"/>
<label for="input" id="button">Push me</label>
input {
display: none;
}
#button {
border: 3px solid #52A7D3;
background-color: #52A7D3;
color: #000000;
}
#input ~ #button:active, #input:checked ~ #button{
background-color: grey;
}
#button {
font: bold 11px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
border: 1px solid #999999;
border-radius: 3px;
}
我已经制作了一个jsFiddle来展示它：http://jsfiddle.net/p0z88ysu/