1

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

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

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

2 回答 2

1

而不是 toggleClass 您应该从选项卡中删除 handle2-selected 类，然后将其应用于当前类（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');
}
于 2012-07-04T20:47:29.483 回答
1

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

$('.tab').removeClass('handle2-selected');
于 2012-07-04T20:48:11.500 回答