web-dev-qa-db-ja.com

クリック時のボタンの色の変更bootstrap

クリックでボタンの色を変更しようとしています。青色の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";   
}
javascriptjquerycssangularjstwitter-bootstrap
6
imadfooki fooki

次の機能例をご覧ください。

$("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>
9
Gilberto Sánchez

置換"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>
2
Zakaria Acharki

これを試して。他のボタンも同じです。ID名を変更するだけです

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

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

参照

1
Pedro Trujillo

他の回答はjqueryまたは!importantのどちらかが必要だったため、気に入らなかった

ブートストラップでは、bootstrapボタンの:active要素の状態は、他の要素の状態よりも詳細に指定されています（これが何を意味するかを理解するには、 ここを参照 ）。このため、:hoverのc​​ssを制御できるかもしれませんが、:activeが不思議なことに機能しないことがわかります。

私がこれを回避した方法は、単に私のcssクラスの特異性を増やすことでした。例えば：

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

に変更しました

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

これにより、bootstrap btn:activeと同等の特異性が得られます。次に、注文の最初にカスタムクラスが表示されるようにしました。

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

お役に立てれば！ちょうど私の個人的な解決策。

0
Cameron

代わりに2つのボタンを使用して、1つを緑色に、もう1つを青色にして、jqueryの表示および後退機能を適用することもできます。

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

最初は#greenボタンを非表示にする必要があります。

0
Kumar Rahul

オプションで、CSSクラスを作成し、クリックするだけでクラスを変更できます。

0
Brian