在引导程序中单击时更改按钮的颜色

请参阅此函数示例：

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

.active {
  background-color: green !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<button type="button" id="btnOUs" class="btn btn-primary" ng-click="levelOU()">Organization Unitss </button>
            <button type="button" id="btnchiefdom" class="btn btn-primary" ng-click="levelCD()">Chiefdom</button>
            <button type="button" id="btndistrict" class="btn btn-primary" ng-click="levelD()">District </button>
            <button type="button" id="btnfaciltiy" class="btn btn-primary" ng-click="levelF()">Facility </button>

我不喜欢其他答案，因为它们要么需要jquery，要么需要!important

在引导程序中，引导按钮的:active元素状态比其他元素状态更明确(要理解这意味着什么，请参阅此处(。这就是为什么你可能会发现自己能够控制:hover的css，但发现:active神秘地不起作用。

我解决这个问题的方法是简单地增加我的 css 类的特异性。例如：

.my-button:active {
    background-color: green;
} 

我把它改成了

.my-button:not(:disabled):not(:disabled):active {
   background-color: green;
} 

这使它具有与引导btn:active相同的特异性。然后，我确保我的自定义类首先出现在排序中。

<a href="foobar" class="my-button btn btn-primary btn-lg">Connect with Us</a>

希望这有帮助！只是我的个人解决方案。

将 "btnOUS" 替换为 中的 "btnOUs"(小s (：

var b1 = document.getElementById("btnOUS");
_______________________________________^

希望这有帮助。

基本示例：

var b1 = document.getElementById("btnOUs");
b1.onclick = function() {
  b1.style.background = "green";  
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<button type="button" id="btnOUs" class="btn btn-primary" ng-click="levelOU()">Organization Units </button>

试试这个。 其他按钮也一样。只需更改 ID 名称

 $("#btnfacility").click(function () {
            $(this).css({"background-color":"green !important"});
        });

使用以下 CSS 伪选择器：

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

btn.btn-primary:active
{
    background-color:grey !important; /* add here any color */
}

  
    
    .btn.btn-warning:hover{
        background: yellow;
    }
    
    /** on active **/
    
   .btn.btn-warning:active{
        background: red;
    }

<div class="col-sm-12" id="my_styles">
         <button type="submit" class="btn btn-warning" id="1">Click me please!!</button>

参考

您可以创建 css 类，只需单击即可更改类。

用两个按钮代替一个按钮，一个应该是绿色的，另一个应该是蓝色的，并应用jquery的显示和后置功能。

(#blue).click(function(){ (#blue).hide(); (#green).show(); })

最初 #green 按钮应该隐藏。

$("#btnid").click(function (){ $(this).css("color","green"); }请尝试此css(( 函数用于设置对象的样式。我添加按钮的点击事件。

您可以使用引导按钮类来更改按钮的颜色。

$('.btn-success').on("click",function(){
    $(".btn-success").removeClass('btn-danger');
    $(this).addClass("btn-danger");
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div >
  <button class="btn btn-success">Button 1</button>
  <button class="btn btn-success">Button 2</button>
  <button class="btn btn-success">Button 3</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>