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

Question

我想在点击时更改按钮的颜色.我是在蓝色的Bootstrap按钮上进行的.但我的代码不起作用.

使用我的JavaScript代码,它不会改变颜色.

<button type="button" id="btnOUs" class="btn btn-primary" ng-click="levelOU()">Organization Units </button>
</button>

<button type="button" id="btnchiefdom" class="btn btn-primary" ng-click="levelCD()">Chiefdom</button>
</button>

<button type="button" id="btndistrict" class="btn btn-primary" ng-click="levelD()">District </button>
</button>

<button type="button" id="btnfaciltiy" class="btn btn-primary" ng-click="levelF()">Facility </button>
</button>

这是javascirpt代码:

var b1 = document.getElementById("btnOUS");
var b2 = document.getElementById("btnchiefdom");
var b2 = document.getElementById("btndistrict");
var b2 = document.getElementById("btnfacility");

b1.onclick = function() {
     b1.style.background = "green";
     b2.style.background = "";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}
b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

Answer 1

看到这个功能示例:

$("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>

Answer 2

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

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

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

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

我把它改为

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

这使其具有与 bootstrap 相同的特异性btn:active。然后我确保我的自定义类出现在排序中的第一个。

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

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