jquery - addClass 在 2 个按钮之间，例如使用 Jquery 的单选按钮

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

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

更新的演示

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

看演示