如何在javascript中更改按钮颜色

创建一个使背景为红色的类，然后在单击的元素上切换该类。当您第一次单击该按钮时，它将添加类，并且背景将更改。当您再次单击它时，它将删除该类并再次将背景色变为"正常"。

.HTML：

<div class="text-center">
<a onclick="changeColor(this)" href="applications-new.php?program_id=1" id="one" name="program-1" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">Boot Camp I</a>
<a onclick="changeColor(this)" href="applications-new.php?program_id=2" id="two" name="program-2" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">Boot Camp II</a>
<a onclick="changeColor(this)" href="applications-new.php?program_id=3" id="three" name="program-1" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">Boot Camp III</a>
<a onclick="changeColor(this)" href="applications-new.php?program_id=4" id="four" name="program-1" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">LSPP I</a>
<a onclick="changeColor(this)" href="applications-new.php?program_id=5" id="five" name="program-1" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">LSAT</a>

.JS：

function changeColor(el){
    jQuery(el).toggleClass('red');
}

.CSS：

.red {
    background-color:red;
}

$(".btn").click(function(e) {
	$(".btn").removeClass("btn-red"); //fallback 
  $(this).addClass("btn-red"); // add color 
});

.btn {
	display:inline-block;
	text-decoration:none;
	padding:6px 12px;
    color:#fff;
}
.btn-blue {
	background-color:blue;
}
.btn-red {
	background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="#" class="btn btn-blue">button</a>
<a href="#" class="btn btn-blue">button</a>
<a href="#" class="btn btn-blue">button</a>
<a href="#" class="btn btn-blue">button</a>
<a href="#" class="btn btn-blue">button</a>

var specialColor='red';
var defaultColor='#012D6B';
$(".text-center a").bind("click",function(){
    $(this).css("background-color",specialColor);
  var currentId=$(this).attr('id');
  $(".text-center a[id!="+currentId+"]").css("background-color",defaultColor);
});

我认为这会对你有所帮助，但你必须在文件/项目中包含jquery。https://jsfiddle.net/bqL7sqde/

由于你没有使用jQuery，我假设你想使用纯Javascript。您可以做的是调用changeColor（this）来传入单击的元素，然后将元素的颜色更改为红色。然后检索同级元素并将除单击的项目以外的其他项目更改为蓝色。下面是一个带有示例的 JSFiddle。

https://jsfiddle.net/603obh3v/1/

function changeColor(element){
  element.style.color = "red";
  var siblings = element.parentElement.children;
  for(var i = 0; i < siblings.length; i++) {
    if(siblings[i] !== element) {
        siblings[i].style.color = "blue";
    }
  }
}
<div class="text-center">
  <a onclick="changeColor(this)" href="#" id="one" name="program-1" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">Boot Camp I</a>
  <a onclick="changeColor(this)" href="#" id="two" name="program-2" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">Boot Camp II</a>
  <a onclick="changeColor(this)" href="#" id="three" name="program-1" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">Boot Camp III</a>
  <a onclick="changeColor(this)" href="#" id="four" name="program-1" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">LSPP I</a>
  <a onclick="changeColor(this)" href="#" id="five" name="program-1" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">LSAT</a>
</div>

纯 JS 解决方案，

function changeColor(el, event) {
  event.preventDefault(); //remove this line
  function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
  }
  var allAnchor = document.getElementsByTagName('a')
  var temp = null;
  for (var i = 0; i < allAnchor.length; i++) {
    if (hasClass(allAnchor[i], 'btn')) {
      temp = allAnchor[i];
      temp.style.backgroundColor = "#012D6B";
    }
  };
  el.style.backgroundColor = "#FF9800";
}

.bkgrnd-dkblue {
  background-color: #012D6B;
  color: #FFF;
}
.btn-width {
  width: 130px;
}
.change-btn-color:hover {
  background-color: #9DC9BA !important;
}
/*custom style below*/
a {
  padding: 5px;
  border: 1px solid #9E9E9E;
  text-decoration: none;
  transition: background ease-in .2s;
}
div.text-center {
  display: block
}

<div class="text-center">
  <a onclick="changeColor(this,event)" href="applications-new.php?program_id=1" id="one" name="program-1" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">Boot Camp I</a>
  <a onclick="changeColor(this,event)" href="applications-new.php?program_id=2" id="two" name="program-2" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">Boot Camp II</a>
  <a onclick="changeColor(this,event)" href="applications-new.php?program_id=3" id="three" name="program-1" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">Boot Camp III</a>
  <a onclick="changeColor(this,event)" href="applications-new.php?program_id=4" id="four" name="program-1" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">LSPP I</a>
  <a onclick="changeColor(this,event)" href="applications-new.php?program_id=5" id="five" name="program-1" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">LSAT</a>

JavaScript替代方法

function changeColor(el, event) {
  event.preventDefault(); //remove this line
  var allAnchor = document.querySelectorAll('a.btn');
  for (var i = 0; i < allAnchor.length; i++)
    allAnchor[i].className = allAnchor[i].className.replace(/active/g, '');
  el.className += ' active';
}

.bkgrnd-dkblue {
  background-color: #012D6B;
  color: #FFF;
}
.btn-width {
  width: 130px;
}
.change-btn-color:hover {
  background-color: #9DC9BA;
}
/*custom style below*/
a {
  padding: 5px;
  border: 1px solid #9E9E9E;
  text-decoration: none;
  transition: background ease-in .2s;
}
div.text-center {
  display: block
}
a.active,
a.active:hover {
  background: #FF9800;
}

<div class="text-center">
  <a onclick="changeColor(this,event)" href="applications-new.php?program_id=1" id="one" name="program-1" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">Boot Camp I</a>
  <a onclick="changeColor(this,event)" href="applications-new.php?program_id=2" id="two" name="program-2" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">Boot Camp II</a>
  <a onclick="changeColor(this,event)" href="applications-new.php?program_id=3" id="three" name="program-1" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">Boot Camp III</a>
  <a onclick="changeColor(this,event)" href="applications-new.php?program_id=4" id="four" name="program-1" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">LSPP I</a>
  <a onclick="changeColor(this,event)" href="applications-new.php?program_id=5" id="five" name="program-1" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">LSAT</a>
</div>

与 Jquery

$('a.btn').on('click', function(e) {
  e.preventDefault(); //remove this line
  $('a.btn').removeClass('active');
  $(this).addClass('active');
})

.bkgrnd-dkblue {
  background-color: #012D6B;
  color: #FFF;
}
.btn-width {
  width: 130px;
}
.change-btn-color:hover {
  background-color: #9DC9BA;
}
/*custom style below*/
a {
  padding: 5px;
  border: 1px solid #9E9E9E;
  text-decoration: none;
  transition: background ease-in .2s;
}
div.text-center {
  display: block
}
a.active,
a.active:hover {
  background: #FF9800;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="text-center">
  <a onclick="changeColor(this,event)" href="applications-new.php?program_id=1" id="one" name="program-1" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">Boot Camp I</a>
  <a onclick="changeColor(this,event)" href="applications-new.php?program_id=2" id="two" name="program-2" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">Boot Camp II</a>
  <a onclick="changeColor(this,event)" href="applications-new.php?program_id=3" id="three" name="program-1" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">Boot Camp III</a>
  <a onclick="changeColor(this,event)" href="applications-new.php?program_id=4" id="four" name="program-1" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">LSPP I</a>
  <a onclick="changeColor(this,event)" href="applications-new.php?program_id=5" id="five" name="program-1" class="btn btn-md bkgrnd-dkblue btn-width change-btn-color">LSAT</a>

希望这有帮助..:)