jquery - CSS按钮按下并保持向下

Question

有没有办法保持按下按钮，也许使用 javascript 或 jquery？

我希望按钮在单击时保持红色，这就是我所拥有的：

<style>
#button {
border: 3px solid #52A7D3;
background-color: #52A7D3;
color: #000000;
}

#button:active {
border: 3px solid red;
background-color: red;
color: #FFF;
}
</style>

Answer 1

你可以尝试这样的事情：

<button id="someId">test</button>

<script type="text/javascript">
$("#someId").click(function() {$(this).toggleClass( "active")})
</script>

<style>
#someId{
border: 3px solid #52A7D3;
background-color: #52A7D3;
color: #000000;
}

#someId.active {
border: 3px solid red;
background-color: red;
color: #FFF;
</style>

这是一个例子

Answer 2

您应该遵循以下流程：

在 CSS 文件中写一个类而不是 #button:active 即

.active {border:3px solid red; background-color: red;color: #FFF; }

并在您的标记页面中将以下 jquery 代码放入脚本块中

$(function(){
   $("#button").mousedown(function(){
       $("#button").addClass("active");
   }).mouseup(function(){
       $("#button").removeClass("active");
   });
});

这将解决您的问题。

Answer 3

如果我是你，我会使用隐藏的复选框和标签。

像这样：http: //jsfiddle.net/22h3M/