jQuery切换内容，多个活动条件

我目前有2个切换内容的选项卡 - 必须设置为在任何时候关注，并且在选定的.content-drawer可见时附加一个活动附加类。

尽管我在下面的工作中操作单个选项卡时，在状态之间切换时，活动状态不起作用，因为：可见状况在错误的时间触发。

难道有人指着我正确的方向吗？这是我目前的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>

来源

2013-01-03 Jamie Taylor

我没有完全理解你的问题是什么，但我看到你有一些问题，异步/回调。为什么不使用'animate'及其''callback'函数（而不是延迟，从api.jquery.com/delay/的评论我看这是可能的）？ – llamerr

试试这个代码

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

Check Fiddle

来源

2013-01-03 23:34:11

jQuery切换内容，多个活动条件

回答

相关问题