javascript - クリック時にボタンをアクティブに設定しますか?

Question

ボタンをクリックしたときにボタンの色を変更しようとしていますが、機能しません。.radio_button:hover関数は機能しますが、.radio_button:active. （CSSはブートストラップCSSによってオーバーライドされていると思いますが、そうでしょうか（そうであれば、ブートストラップCSSをオーバーライドするにはどうすればよいですか））？

ボタン付きフォーム:

<table border="0" width="100%" cellpadding="5px">
  <tr>
    <td>
      <%= simple_form_for(@post, :html => {:class => 'form-inline' }) do |f| %>
      <%= f.input :link, label: false %>
      <%= f.input :tag_list, placeholder: "Add some tags...", label: false %>
      <div id="type_group" class="btn-group" data-toggle="buttons-radio">
        <%= f.input :type, as: :hidden %>
          <a class="radio_button" id="radio_button_zero" data-value="0">ZERO</a>
          <a class="radio_button" id="radio_button_one" data-value="1">ONE</a>
          <a class="radio_button" id="radio_button_two" data-value="2">TWO</a>
      </div>
      <%= button_tag(type: 'submit', class: "submit_button") do %>
        POST!
      <% end %>
      <% end %>
    </td>
  </tr>
</table>

CSS:

.radio_button {
        color: white;
        background-color:#828282;
        font-family: 'Fjalla One', serif;
        font-size: 10pt;
        font-weight: 100;
        text-align: center;
        font-style: italic;
        padding:0px 6px;
        padding-right: 8px;
        padding-top: 3px;
        padding-bottom: 2px;
        text-decoration:none;
        border: none;
    }.radio_button:hover {
        background-color:#0E9EBB;
        color: white;
        text-decoration:none;
    }.radio_button:active {
        position:relative;
        background-color:#0E9EBB;
        top:1px;
    }.radio_button,.btn:focus{
        outline:none!important
    }

コーヒースクリプト:

$ ->
  $("a.radio_button").click (e) ->
    e.preventDefault();
    clickedValue = $(this).data("value")
    $("#post_type").val clickedValue
    if clickedValue == 0
      $("#radio_button_zero").addClass('active')

Answer 1

ブートストラップCSSをオーバーライドしたい場合は、ブートストラップの前にCSSを含めるだけです...またはjQueryを使用できます...

<style>
   .active {
      position:relative;  
      background-color:#0E9EBB;  /* u can use background-color:#0E9EBB!important;*/
      top:1px;
</style>

$('button').click(function (){
  $(this).addClass('active');
});

Answer 2

すべての変更を確認してください

http://demo.sumedhasoftech.com/manoj/test/test.html