1

我将不胜感激有关内容切换的一些帮助。

我目前有 2 个用于切换内容的选项卡 - 必须将一个选项卡设置为随时聚焦，并在所选.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 回答