Question

我正在使用bootstrap 3.我想在点击按钮时更改按钮颜色。我的意思是按钮在选中时应该是不同的颜色。我怎么能用css做到这一点？

我的代码是：

<div class="col-sm-12" id="">
    <button type="submit" class="btn btn-warning" id="1">Button1</button>
    <button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>

Answer 1

CSS有不同的伪选择器，您可以通过它实现此类效果。在您的情况下，您可以使用

：有效：如果您只想在单击按钮时想要背景颜色并且不想保留。

：焦点：如果你想要背景颜色，直到焦点在按钮上。

button:active{
    background:olive;
}

和

button:focus{
    background:olive;
}

JsFiddle Example

P.S。：请不要在html元素的Id属性中给出数字。

Answer 2

CSS有许多伪选择器，如：active，：hover，：focus，所以你可以使用。

HTML

<div class="col-sm-12" id="my_styles">
     <button type="submit" class="btn btn-warning" id="1">Button1</button>
     <button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>

CSS

.btn{
    background: #ccc;
} .btn:focus{
    background: red;
}

JsFiddle

Answer 3

HTML--

<div class="col-sm-12" id="my_styles">
   <button type="submit" class="btn btn-warning" id="1">Button1</button>
   <button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>

的CSS -

.active{
         background:red;
    }
 button.btn:active{
     background:red;
 }

的jQuery -

jQuery("#my_styles .btn").click(function(){
    jQuery("#my_styles .btn").removeClass('active');
    jQuery(this).toggleClass('active');

}）;

查看jsfiddle

上的实时演示

如何在使用bootstrap激活时更改按钮颜色？

3 个答案: