javascript - 选择 onclick 样式化元素

Question

我怎样才能像这样转动一个元素:

<a href="#" class="select" id="select">Element1</a>
<a href="#" class="select" id="select">Element2</a>
<a href="#" class="select" id="select">Element3</a>

要像一个选中的按钮，例如，它的正常外观是

.select {
  border: 1px solid red;
}

但是如果我点击其中的一个元素，它就会变成

.select {
   background-color: red;
}

但我想在这里学习的技巧是，我怎样才能使它只有一个元素能够具有样式，就像单选按钮一样，只有一个按钮具有选定的样式，如果我点击另一个按钮，样式从上一个样式中删除并在单击的样式中，仅在可能的情况下使用 JavaScript 和 CSS

Answer 1

//get all buttons
var btns = document.getElementsByClassName("select");

function clicker() {
  //loop through all buttons
  for (y = 0; y < btns.length; ++y) {
    //if button is not the current button remove the background class
    if (btns[y].classList.contains && btns[y] != this) {
      btns[y].classList.remove("colorize")
    } //end if
    //add background class to current button
    this.classList.add("colorize");
  }
}
//add an event handler to all buttons
for (x = 0; x < btns.length; ++x) {
  btns[x].addEventListener("click", clicker)
}

.select {
  border: 1px solid red;
}

.colorize {
  background-color: red;
}

<a href="#" class="select">Element1</a>
<a href="#" class="select">Element2</a>
<a href="#" class="select">Element3</a>