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

您应该从选项卡中删除handle2选择的类，而不是toggleClass，然后将其应用于当前的类（this）

像

这样的东西

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

更新

删除活动标签上的活动类

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

Answer 2

您应该像上一个标签一样切换上一个标签上的类。或者你可以在开始动画之前编写我的代码。

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

将tab的值重置为默认的css状态

2 个答案: