Javascript 选择后如何创建活动按钮

我有这样的代码，我在一个IFrame中链接了几个苍蝇，我希望所选按钮的颜色改变并保持不同，直到按下另一个按钮

<style>

.myButton:active 
{
position:relative; 
top:1px;


}  
</style>


<a class="myButton " href="" target="someFrame">Button1</a>
<a class="myButton " href="" target="someFrame" >Button 02</a> 
<a class="myButton " href="" target="someFrame">Button 03</a> 
<a class="myButton " href="" target="someFrame">Button 04</a> 
<a class="myButton " " target="someFrame" >Button 05</a>

.myButton:活动
{
位置：相对位置；
顶部：1px；
}  
您可以做的是在按下按钮时调用JS/jQuery函数。该函数类似于下面的伪代码：

function(){
    removeClassFromOtherButtons('activeClass');
    this.addClass('activeClass');
}

然后在CSS中，使用
。activeClass
具有不同颜色的背景。
如果您喜欢不使用JavaScript的解决方案，可以通过一些隐藏的radiobutton技巧来实现：


input[type=“radio”][name=“toggleRadio”]{
显示：无；
}
输入[type=“radio”][name=“toggleRadio”]+标签{
光标：指针；
}
输入[type=“radio”][name=“toggleRadio”]：选中+a{
颜色：#000；
文字装饰：无；
}
在css文件上创建一个
.active
类，当按下按钮并从其他按钮中移除时，该类将被添加到按钮中

var buttons = document.querySelectorAll('.myButton');
buttons.forEach(function(button) {
    button.addEventListener('click', function() {
        toggleClass(buttons, this);
  });
});

function toggleClass(buttons, buttonToActivate) {
  buttons.forEach(function(btn) {
      btn.classList.remove('active');
  });
  buttonToActivate.classList.add('active');
}

因此，
：active
是一个：伪类，在按下按钮或锚定时使用

如果你想让你的按钮处于活动状态，你需要用另一个类来标记它


var buttons=document.querySelectorAll（'.myButton'）；
var activeClassName='active'；
函数activeState（项、activeName）{
对于（变量i=0；i

.myButton{
位置：相对位置；
顶部：1px；
}
.myButton.active{
背景：#f00；
颜色：#fff；
边框颜色：#f00；
}
测试1
测试2
测试3
测试4
测试5
单击按钮call onclick功能后，测试6
使用公共类名称从所有按钮中删除活动类，然后将活动类添加到特定按钮

在css中，指定所选按钮的颜色

.active{
background:red;}

Onclick函数

$(".mybutton").on("click",function(event){ addclassactive(event.target);
}

function addclassactive (caller){
$(".mybutton").removeClass("active");
$(caller).addClass("active"):
}