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

请参阅此功能示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将"btnOUS"替换为"btnOUs"（小s）：

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

希望这有帮助。

基本示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

试试这个。其他buttons.just需要更改id名称

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

Answer 4

使用以下CSS伪选择器：

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

reference

Answer 5

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

Answer 6

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

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

初始#green按钮应隐藏。

Answer 7

在引导程序中，与其他元素状态相比，对引导程序按钮的:active元素状态进行了更详细的指定（以了解see here的含义）。这就是为什么您可能发现自己能够控制:hover的css却神秘地发现:active无效的原因。

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

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

我将其更改为

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

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

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

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

Answer 8

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

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

8 个答案: