样式元素选择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

＆＃13;

＆＃13;

//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)
}

＆＃13;

.select {
  border: 1px solid red;
}

.colorize {
  background-color: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以尝试以下操作： - 首先，从所有链接中删除选定的类，然后将选定的类添加到单击的链接（使用jQuery）。< /强>

<强> HTML

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

<强> CSS

.select {
  border: 1px solid red;
}
.selected {
   background-color: red;
}

<强>的jQuery

$(document).ready(function(){
    $('.select').click(function(){
        $('.select').removeClass('selected');
        $(this).addClass('selected');
  });
})

Live Example

Answer 3

您可以使用JavaScript和addClass（）方法轻松完成此操作。

首先，不要对多个元素使用相同的ID。

HTML：

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

CSS：

.select {
    border: 1px solid red;
}

.clicked {
    background-color: red;
}

的JavaScript：

$(document).ready(function () {

$(".select").click(function () {
    $(".select").addClass("clicked");
});

});

注意此方法使用jQuery