Question

我想要制作2 <span>个单选按钮，但与单选按钮略有不同。

例如。

<span>Button1</span>
<span>Button2</span>

当用户点击Button1然后addClass '.active'点击Button1的跨度时。在此期间，当用户点击Button2然后删除Button1的跨度'.active'和将它添加到Button2的跨度。到目前为止，这类似于单选按钮。但是，当用户点击已存在.active的同一按钮时，我需要移除.active。

我的问题是我不知道如何在按钮之间切换活动类。

Answer 1

基于Dumitru Chirutac回答：

您可以使用以下代码修复他的答案以获得正确的行为：

$(document).ready(function(){
    $('.btn').click(function(){ //use the correct selector for your html
        if($(this).hasClass('active')){
            $(this).removeClass('active');
        } else {
            $(this).addClass('active').siblings().removeClass('active');       
        }
    });
});

这样您可以检查当前是否已激活。如果是则删除活动。如果不使用它作为切换。

updated DEMO

Answer 2

试试这个：

<强> HTML

<span class="btn">Button 1</span>
<span class="btn">Button 2</span>
<span class="btn">Button 3</span>
<span class="btn">Button 4</span>

<强>的Javascript

$(document).ready(function(){
   $('.btn').click(function(){
      $(this).addClass('active').siblings().removeClass('active');       
   });
});

SEE DEMO

使用Jquery在2个按钮之间添加addClass，如单选按钮

2 个答案: