Javascript 切换按钮充当收音机问题
我试图创建一个按钮,将作为一个收音机输入。表示如果有多个按钮,一次只能选择一个 但到目前为止,我创建的所有按钮现在都可以一次选择。我不知道如何像收音机一样工作。我是说只有一个按钮。如果选择了一个,则应关闭另一个 任何帮助都将不胜感激 以下是我目前制作的js fiddle链接: HTMLJavascript 切换按钮充当收音机问题,javascript,jquery,Javascript,Jquery,我试图创建一个按钮,将作为一个收音机输入。表示如果有多个按钮,一次只能选择一个 但到目前为止,我创建的所有按钮现在都可以一次选择。我不知道如何像收音机一样工作。我是说只有一个按钮。如果选择了一个,则应关闭另一个 任何帮助都将不胜感激 以下是我目前制作的js fiddle链接: HTML <div style="margin:0px auto; margin-top:100px; width:960px;"> <a href="#"> <span class=
<div style="margin:0px auto; margin-top:100px; width:960px;">
<a href="#">
<span class="toggleButtonRadio normal">toggle Radio button</span>
</a>
<a href="#">
<span class="toggleButtonRadio normal">toggle Radio button</span>
</a>
<a href="#">
<span class="toggleButtonRadio normal">toggle Radio button</span>
</a>
</div>
JS
.toggleButtonRadio , .toggleButton {
background: #e1e1e1;
text-decoration: none;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
font-size: .769em;
font-weight: 900;
color: #454545;
text-transform: uppercase;
text-decoration: none;
padding: 5px 10px;
-webkit-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(64, 64, 64, .5);
box-shadow: 0px 0px 3px 0px rgba(64, 64, 64, .5);
}
.toggleButtonRadio:hover, .toggleButton:hover{
background:#d4d4d4;
}
.toggleButtonRadio.active , .toggleButton.active{
background:#90bf00;
color:#fff;
}
.active:hover{
background:#7ca600;
}
$('.toggleButtonRadio').click(function(){
$(this).toggleClass("active");
});
将其添加到ToggleClass之前:
$('.toggleButtonRadio').removeClass("active");
演示:在ToggleClass之前添加以下内容:
$('.toggleButtonRadio').removeClass("active");
演示:从其他按钮中删除
活动的
类,并将该类添加到当前按钮
var $bts = $('.toggleButtonRadio').click(function () {
$bts.removeClass('active');
$(this).addClass("active");
});
演示:从其他按钮中删除
活动的
类,并将该类添加到当前按钮
var $bts = $('.toggleButtonRadio').click(function () {
$bts.removeClass('active');
$(this).addClass("active");
});
演示: