在两个按钮之间添加类，如使用Jquery的单选按钮

我有两个

，我想把它们做成单选按钮，但和单选按钮有点不同

比如说

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

按钮1
按钮2

当用户单击按钮1时，将

addClass.active'

添加到按钮1的范围。 同时，当用户单击按钮2时，删除按钮1的span

“.active”

和 将其添加到按钮2的范围。到目前为止，这类似于单选按钮。但是，当用户单击已存在

.active

的同一按钮时，我需要删除

.active

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

尝试以下操作：

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>

试试这个：

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>

---

基于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');       
        }
    });
});

通过这种方式，您可以检查电流是否已激活。如果是，请删除活动。如果没有，则将其用作切换

---

基于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');       
        }
    });
});

通过这种方式，您可以检查电流是否已激活。如果是，请删除活动。如果没有，则将其用作切换

---

当您重新单击它们时，它们会保持活动状态，但这不起作用

但是当用户单击已存在的相同按钮时，我需要删除.active。

当您重新单击它们时，它们将保持活动状态，这不起作用<代码>但当用户单击已存在的相同按钮时，我需要删除.active。