我想在点击时更改按钮的颜色。我在蓝色的 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";
}
最佳答案
查看此功能示例:
$("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>
关于javascript - 在 Bootstrap 中单击时更改按钮的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34144982/