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 で選択されたクラスをタブから削除してから、現在のクラスに適用する必要があります (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 に答える