如何在javascript中更改按钮颜色？

Question

我有5 buttons，他们都是blue。当您单击其中一个按钮时，单击的按钮应更改为red。但其他四个按钮应保留在blue中。此外，如果您单击按钮两次或更多次，则不应将颜色更改回blue。例如，如果我点击button one它会更改为red，如果我再次点击button one，它应该是red而不是blue，颜色只有在您单击其他按钮时才会更改。它就像radio按钮，但我需要一个<a>标记，我无法使用radio buttons

HTML

<div class="text-center">
<a onclick="changeColor()" 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()" 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()" 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()" 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()" 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(){

    if(document.getElementById('one').clicked === true)
     {
       document.getElementById('one').style.background = "red";
     }else {
       document.getElementById('one').style.background = "#012D6B";
     }

     if(document.getElementById('two').clicked === true)
     {
       document.getElementById('two').style.background = "red";
     }else {
       document.getElementById('two').style.background = "#012D6B";
     }

     if(document.getElementById('three').clicked === true)
     {
       document.getElementById('three').style.background = "red";
     }else {
       document.getElementById('three').style.background = "#012D6B";
     }

     if(document.getElementById('four').clicked === true)
     {
       document.getElementById('four').style.background = "red";
     }else {
       document.getElementById('four').style.background = "#012D6B";
     }

     if(document.getElementById('five').clicked === true)
     {
       document.getElementById('five').style.background = "red";
     }else {
       document.getElementById('five').style.background = "#012D6B";
     }
}

我的js不起作用。此外，我相信没有5 if和5 else声明，有更好的方法可以做到这一点

PS：这是我的css以防万一：

.bkgrnd-dkblue {
background-color: #012D6B;
color: #FFF;
}

 .btn-width{
  width:130px;

}

 .change-btn-color:hover {

   background-color: #9DC9BA;
  }

谢谢

Answer 1

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

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

Answer 2

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

Answer 3

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/

Answer 4

由于您不使用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>

Answer 5

纯JS解决方案，

＆＃13;

＆＃13;

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


}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

javascript替代方法

＆＃13;

＆＃13;

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

}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用Jquery

＆＃13;

＆＃13;

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

})

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望这会有所帮助.. :)