addClass между двумя кнопками, такими как переключатель с помощью JQuery

Question

У меня есть 2 <span>, который я хочу сделать, как переключатели, но немного отличающиеся от переключателей.

Например.

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

Когда пользователь нажимает на Button1 затем addClass '.active' в пролете BUTTON1 в. В то же время, когда пользователь нажимает кнопку Button2, удалите диапазон Button1 '.active' и добавьте его в диапазон Button2. Пока это похоже на переключатель. Но мне нужно удалить .active, когда пользователь нажимает на ту же кнопку, которая уже имеет .active.

Моя проблема: я не знаю, как переключить активный класс между кнопками.

Answer 1

основе Думитру 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