将选项卡的值重置为默认 css 状态



我有一个关于在单击另一个选项卡时重置活动选项卡类的状态的问题。 下面的代码按预期切换类以显示不同的选项卡颜色图像,但是如果我单击另一个选项卡,两个选项卡都显示为活动状态。

我的问题是我需要添加什么才能将活动选项卡重置回其默认状态并将新单击的选项卡激活为活动状态。

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

您也应该像在下一个选项卡上一样切换上一个选项卡上的类。或者你可以在开始动画之前编写我的这段代码。

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

而不是切换类,您应该从选项卡中删除 handle2 选择的类,然后将其应用于当前类(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');
}

最新更新