我正在尝试创建一个充当无线电输入的按钮。意味着如果有许多按钮,则一次只能选择一个按钮。
但是到目前为止我创建的所有按钮现在都可以选择。我无法像收音机一样工作。我的意思是只有一个按钮。如果选择一个,则应关闭其他一个。
任何帮助将不胜感激。
以下是我到目前为止所做的js小提琴链接:http://jsfiddle.net/saifrahu28/eQ744/1/
HTML
<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>
CSS
.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;
}
JS
$('.toggleButtonRadio').click(function(){
$(this).toggleClass("active");
});
答案 0 :(得分:2)
在ToggleClass之前添加:
$('.toggleButtonRadio').removeClass("active");
答案 1 :(得分:2)
从其他按钮中删除active
类,并将该类添加到当前按钮
var $bts = $('.toggleButtonRadio').click(function () {
$bts.removeClass('active');
$(this).addClass("active");
});
演示:Fiddle