1

コンテンツの切り替えについてサポートをいただければ幸いです。

現在、コンテンツを切り替える2つのタブがあります。1つは常にフォーカスするように設定する必要があり、選択したものが表示されている場合はアクティブの追加クラスが追加され.content-drawerます。

以下の私の努力は単一のタブを操作するときに機能しますが、状態を切り替えると：visible条件が間違ったタイミングで発生するため、アクティブ状態は機能しません。

誰かが私を正しい方向に向けることができますか？これが私の現在のjsfiddleです

    $('.content-drawer').hide();

    $('.tab').click(function() {
        var target = $(this.rel);
            $('.content-drawer').not(target).slideUp();
            target.delay(500).slideToggle();
            $('.tabs > li.focus').removeClass('focus');
            $(this).parent().addClass('active focus');

    if ( $('.content-drawer:visible').length ) {
       $('.tabs > li.active').removeClass('active');
    }
    return false;
});​


<ul class="tabs">
   <li class="focus">
       <a href="#" rel="#calc" class="tab"><i class="icon-plus"></i>Calculator</a>
   </li>
   <li>
       <a href="#" rel="#info" class="tab"><i class="icon-info"></i>Info</a>
    </li>
</ul>

<div class="content-drawer" id="calc">
    <p>Calc Content</p>    
</div>
<div class="content-drawer" id="info">
    <p>Info Content</p>    
</div>
4

1 に答える 1

0

このコードを試してください

    $('.content-drawer').hide();

$('.tab').click(function() {
    var $this = $(this);
    var target = $(this.rel);
    $this.closest('li').addClass('active focus');
    // Add the classes to the closest li of the clicked anchor
    $('.tab').not($this).closest('li').removeClass('active focus');
    // Remove the classes for the non-clicked items
    $('.content-drawer').not(target).slideUp();
    // Slideup the other contents
    target.delay(500).slideToggle();
    // Toggle the current content
    if (target.is(':visible')) {
        // Only if the target is visible remove the active class
        $this.closest('li').removeClass('active');
    } 
    return false;
});​

フィドルをチェック

于 2013-01-03T23:34:11.973 に答える