CSS 按钮突出显示点击后答案

【问题标题】：CSS Button Highlight post clickCSS 按钮突出显示点击后
【发布时间】：2014-10-08 07:37:49
【问题描述】：

我的视图中有三个按钮。我希望按钮不仅在单击期间突出显示，而且在单击后突出显示（除非再次单击）。我知道如何在点击时突出显示按钮，但我希望突出显示持续到进行新的点击。有什么办法吗？？

【问题讨论】：

您是在寻找脚本解决方案还是纯 css 解决方案？
什么都行..最好是 CSS
纯CSS做不到。您将需要 JavaScript。发布一个 jsfiddle，我相信有人可以帮助您将脚本添加到您的代码中。
How to highlight a button in html page when i click on it?的可能重复

【解决方案1】：

jQuery 版本

HTML

<button onclick=Highlight(this)/>

jQuery

function Highlight(button) {
   $(".Highlight").removeClass("Highlight");
   $(button).addClass("Highlight");
}

【讨论】：

【解决方案2】：

这是一个应该在纯 CSS 中完成的小提琴。您将无法使用实际按钮。但是您可以设置标签的样式，因为我必须看起来像按钮。

注意：这在 IE8 等旧版浏览器中无法正常工作

http://jsfiddle.net/ghvst26b/

HTML

<input type="radio" name="Button" class="ButtonState" checked id="Button1" value="1"/>
<label class="Button" for="Button1">Button 1</label>
<input type="radio" name="Button" class="ButtonState" id="Button2" value="2"/>
<label class="Button" for="Button2">Button 2</label>
<input type="radio" name="Button" class="ButtonState" id="Button3" value="3"/>
<label class="Button" for="Button3">Button 3</label>

CSS

.ButtonState{display:none}
.Button{padding:3px; margin:4px; background:#CCC; border:1px solid #333; cursor:pointer;}
.ButtonState:checked + .Button{background:#fff;}

【讨论】：

否则正如@GarySpectrum 提到的，您必须使用 Javascript 来添加和删除活动按钮的类。