javascript - 如何更改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

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

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