设置按钮在点击时处于活动状态？

我试图改变按钮的颜色，当我点击它，但它不起作用。 .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 
    }

的CoffeeScript：

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

来源

2013-07-16 allegutta

你能重新创建的jsfiddle问题了吗？ –

这些是什么 - >？ – raam86

@ raam86，相信这是咖啡脚本 – vee

看看的所有的变化

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

来源

2013-07-16 14:27:16

我可能会错过一些东西，但这看起来不像是对我的回答。 –

对不起，Manoj，按钮没有设置为活动.. – allegutta

根据你的jQuery功能，它会让按钮激活点击第一个按钮 –

如果妳想要重写引导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'); 
});

来源

2013-07-16 14:27:31

是不是有一种方法来禁用引导CSS？（因为我的CSS位于.css文件中，而不是与HTML相同的文件）。 – allegutta

确定然后只包括CSS这样的： <链路的rel = “样式表的” href = “内容/ bootstrap.css”> <链路的rel = “样式表的” href = “内容/ yourcss.css”> 和使用一些“更强”的选择按钮，如id或一些精确的类 –

是否良好的铁轨练习？ – allegutta

设置按钮在点击时处于活动状态？

回答

相关问题