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

私があなたなら、非表示のチェックボックスとラベルを使用します。

そのように：http://jsfiddle.net/22h3M/

Answer 3

以下のプロセスに従う必要があります。

#button:active ie の代わりに CSS ファイルにクラスを記述します。

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

マークアップページで、以下のjqueryコードをスクリプトブロックに入れます

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

これで問題が解決します。