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

Question

如果您能帮助我进行内容切换，我将不胜感激。

我目前有两个选项卡来切换内容——一个必须在任何时候设置为聚焦，当所选的.content-drawer可见时附加一个额外的活动类。

当操作单个选项卡时，虽然我的努力下面工作，但在状态之间切换时，活动状态不起作用，因为:可见条件在错误的时间触发。

谁能给我指个方向吗?这是我当前的文件

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

Answer 1

试试这个代码

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

检查小提琴