Сброс значения вкладки до состояния по умолчанию css

Question

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

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

$(document).ready(function(){ 
    $('.slide-out').each(function(){ 
     var $this = $(this); 
     var defaultPos = roundValue($this.css('left')); 

     $('.tab', $this).on('click', function(){ 
      var tab = $(this);                    
      var goTo = tab.attr('slide-To'); 
      var currentPos = roundValue($this.css('left')); 

      if(goTo == currentPos){ 
       goTo = defaultPos; 
      }          

      $this.animate({'left': goTo}, 'slow'); 
      $(this).toggleClass('handle2-selected');          
     }); 
    }); 
}); 

Answer 1

Вы должны переключить класс на предыдущей вкладке так же, как и для следующей вкладки. или вы можете написать мой код перед началом анимации.

$('.tab').removeClass('handle2-selected'); 

Answer 2

Вместо toggleClass вы должны удалить handle2 выбранный класс из вкладки затем применить его к текущему (это)

Что-то вроде

$('.tab').removeClass('handle2-selected'); 
tab.addClass('handle2-selected'); 

Update:

Для удаления активного класса на активной вкладке

// check if current clicked tab has the active class or not 
if(tab.hasClass('handle2-selected')) { 
    // if current clicked tab has active class, remove it 
    tab.removeClass('handle2-selected'); 
    // add other codes for this state if needed 
} else { 
    // if not then do the normal removing and adding to current tab 
    $('.tab').removeClass('handle2-selected'); 
    tab.addClass('handle2-selected'); 
}