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

Changing the Color of button on Click in bootstrap

提问by imadfooki fooki

I am trying to change the color of the button on click . I am doing it on the Bootstrap button which is blue. But my code is not working.

我正在尝试更改 click 按钮的颜色。我是在蓝色的 Bootstrap 按钮上做的。但是我的代码不起作用。

With my JavaScript code following, it is not changing the color.

跟着我的 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>

Here is the javascirpt code:

这是javascipt代码：

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";   
}

回答by Gilberto Sánchez

See this functional example:

请参阅此功能示例：

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

回答by Zakaria Acharki

Replace "btnOUS"by "btnOUs"(small s) in :

替换"btnOUS"为"btnOUs"(small s) in ：

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

Hope this helps.

希望这可以帮助。

---

---

Basic example :

基本示例：

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>

回答by Zakaria Acharki

try this. same for other buttons.just need to change the id name

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

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

回答by Pedro Trujillo

Use the following CSS pseudo selector:

使用以下 CSS 伪选择器：

active: if you want background color only when the button is clicked and don't want to persist.

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>

reference

参考

回答by Kumar Rahul

You can also take two button instead one them should be green and another should be blue and apply show and hind function of jquery.

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

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

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

initally #green button should be hide.

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

回答by Cameron

I didn't like the other answers because they either required jqueryor !important

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

In bootstrap, the :activeelement state for bootstrap buttons is more specified than it is for other element states (to understand what this means, see here). This is why you may find yourself able to control the css of :hoverbut find that :activemysteriously doesn't work.

在 bootstrap 中，:activebootstrap 按钮的元素状态比其他元素状态更具体（要了解这意味着什么，请参阅此处）。这就是为什么您可能会发现自己能够控制 css 的原因，:hover但发现它:active神秘地不起作用。

The way I got around this was by simply increasing the specificity of my css class. For example:

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

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

I changed it to

我把它改成

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

This gives it equal specificity to the bootstrap btn:active. Then I made sure my custom class appears first in the ordering.

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

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

Hope this helps! Just my personal solution.

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

回答by Brian

Optionally you can create css classes and simply change the class on click.

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