Question

我希望通过内容切换获得一些帮助。

我目前有两个切换内容的标签 - 一个必须设置为一次对焦，另一个活动的附加类在所选的.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>

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;
});

<强> Check Fiddle

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

1 个答案: