为不同的按钮设置背景色按钮

Question

我有3个按钮，我想单击一个按钮，然后从单击的按钮更改颜色，如果我单击另一个按钮，则将其设置回原始背景颜色，然后将背景颜色放在另一个按钮上。

html代码-调用css和make按钮

function myFunction() {
  document.getElementById("teldemo").innerHTML = "+351 289890700";

}

function myFunction2() {
  document.getElementById("teldemo").innerHTML = "+351 289890750";

}

function myFunction3() {
  document.getElementById("teldemo").innerHTML = "+351 289890705";

}

$("#test1").click(function() {
  if (true) {
    $("#test1").addClass('button-clicked');
    $("#test2").addClass('button-clicked2');
    $("#test3").addClass('button-clicked2');
  } else {
    $("#test1").addClass('button-clicked2');
  }


});

$("#test2").click(function() {

  $("#test2").addClass('button-clicked');
  $("#test1").addClass('button-clicked2');
  $("#test3").addClass('button-clicked2');

});

$("#test3").click(function() {

  $("#test3").addClass('button-clicked');
  $("#test2").addClass('button-clicked2');
  $("#test1").addClass('button-clicked2');

});

.button-clicked {
  background: #fff;
  border: 2px solid #F57E00;
}

.button-clicked2 {
  background: none;
  border: 2px solid #F57E00;
}

.ghost-button-border-color {
  display: inline-block;
  width: 200px;
  padding: 8px;
  color: #000;
  border: 2px solid #999;
  text-align: center;
  outline: none;
  text-decoration: none;
  -webkit-transition: border-color 0.3s ease-out, color 0.3s ease-out;
  transition: border-color 0.3s ease-out, color 0.3s ease-out;
}

.ghost-button-border-color:hover,
.ghost-button-border-color:active {
  color: #F57E00;
  border-color: #F57E00;
  -webkit-transition: border-color 0.4s ease-in, color 0.4s ease-in;
  transition: border-color 0.4s ease-in, color 0.4s ease-in;
}

<center>
  <a id="test1" onclick="myFunction()" class="ghost-button-border-color" href="#contact">Teleonda</a>
  <a id="test2" onclick="myFunction2()" class="ghost-button-border-color" href="#contact">Teleonda CV</a>
  <a id="test3" onclick="myFunction3()" class="ghost-button-border-color" href="#contact">Teleonda Mobile</a>
</center>

javacript / jquery代码-单击时更改div中的文本，并单击不同按钮时尝试更改背景色

了解其住宿方式

Answer 1

只需在类名称级别使用简单的click事件侦听器，并使用removeClass和addClass方法：

$('.ghost-button-border-color').click(function(){
  $('.ghost-button-border-color').removeClass('button-clicked');
  $(this).addClass('button-clicked');
});

.button-clicked {
  background: red;
  border: 2px solid #F57E00;
}

.button-clicked2 {
  background: none;
  border: 2px solid #F57E00;
}

.ghost-button-border-color {
  display: inline-block;
  width: 200px;
  padding: 8px;
  color: #000;
  border: 2px solid #999;
  text-align: center;
  outline: none;
  text-decoration: none;
  -webkit-transition: border-color 0.3s ease-out, color 0.3s ease-out;
  transition: border-color 0.3s ease-out, color 0.3s ease-out;
}

.ghost-button-border-color:hover,
.ghost-button-border-color:active {
  color: #F57E00;
  border-color: #F57E00;
  -webkit-transition: border-color 0.4s ease-in, color 0.4s ease-in;
  transition: border-color 0.4s ease-in, color 0.4s ease-in;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
  <a id="test1" class="ghost-button-border-color" href="#contact">Teleonda</a>
  <a id="test2" class="ghost-button-border-color" href="#contact">Teleonda CV</a>
  <a id="test3" class="ghost-button-border-color" href="#contact">Teleonda Mobile</a>
</center>