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

Question

我正在尝试更改 click 按钮的颜色。 我是在蓝色的 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>

这是javascript代码：

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

将"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>

Answer 3

我不喜欢其他答案，因为它们需要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>

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

Answer 4

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

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

Answer 5

使用以下 CSS 伪选择器：

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

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>

参考

Answer 6

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

Answer 7

您也可以使用两个按钮，而不是一个应该是绿色的，另一个应该是蓝色的，并应用 jquery 的 show 和 hind 功能。

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

最初#green 按钮应该是隐藏的。

Answer 8

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

Answer 9

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

 $('.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>