Question

我有一个奇怪的（烦人的）问题，我正在编写一个小的jquery补码。它旨在控制页面上内容的小标签导航，这并不意味着什么大不了的事。它目前有3个按钮（选项卡），系统用于淡出当前选项卡和内容，并在您单击任何选项卡时更改为新选项卡。

HTML如下：

            <div class="fixed-wing-nav-cont">
                <div class="fixed-wing-nav">
                    <div class="fixed-wing-nav-item" id="wing-nav-1">Features</div>
                    <div class="fixed-wing-nav-item"  id="wing-nav-2">Benefits</div>
                    <div class="fixed-wing-nav-item active"  id="wing-nav-3">Screenshots</div>
                </div>
            </div>

            <div class="fixed-wing-tab-cont">
                <div id="fixed-wing-tab-1">
                    Features Tab
                </div>
                <div id="fixed-wing-tab-2">
                    Benefits Tab
                </div>
                <div id="fixed-wing-tab-3" class="active">
                    <img src="images/screens.png" alt="screens" /> <a href="#" class="red">VIEW ALL</a>
                </div>
                <div class="clear"></div>
            </div>

与CSS相关联，以防万一可能很重要，如下：

.fixed-wing-nav-cont{
    width:100%;
    border-bottom:1px solid #747474;
    margin:20px 0;
}

.fixed-wing-nav{
    display:table;
    border-spacing:5px 0;
    border-collapse:separate;
    margin-left:-5px;
}

.fixed-wing-nav-item{
    margin-right:40px;
    height:40px;
    color:#1c5fa9;
    font-size:16px;
    border-left:1px solid #1c5fa9;
    border-top:1px solid #1c5fa9;
    border-right:1px solid #1c5fa9;
    text-align:center;
    padding:0 10px;
    display:table-cell;
    vertical-align:middle;
    cursor:pointer;
}

.fixed-wing-nav-item.active{
    color:#fff;
    background-color:#1c5fa9;
}

.fixed-wing-tab-cont{
    position:relative;
    width:100%;
    height:400px;
}

.fixed-wing-tab-cont>div{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:400px;
    overflow:hidden;
    display:none;
}

.fixed-wing-tab-cont>div.active{
    display:block;
}

.fixed-wing-tab-cont img{
    border:none;
}

Jquery补充是一个非常简单的补充 - 我知道有更优雅的方法可以做到这一点，但我选择了更快的代码，更简单的整体：

<script type="text/javascript">
$('#wing-nav-1').click(function(){
    $('div.fixed-wing-nav-item').removeClass("active",function(){
        $('#wing-nav-1').addClass("active");
    });
    $('#fixed-wing-tab-3').removeClass("active");
    $('.fixed-wing-tab-cont>div').fadeOut("fast",function(){
        $('#fixed-wing-tab-1').fadeIn("fast");
    });
});

$('#wing-nav-2').click(function(){
    $('div.fixed-wing-nav-item').removeClass("active",function(){
        $('#wing-nav-2').addClass("active");
    });
    $('#fixed-wing-tab-3').removeClass("active");
    $('.fixed-wing-tab-cont>div').fadeOut("fast",function(){
        $('#fixed-wing-tab-2').fadeIn("fast");
    });
});

$('#wing-nav-3').click(function(){
    $('div.fixed-wing-nav-item').removeClass("active",function(){
        $('#wing-nav-3').addClass("active");
    });
    $('#fixed-wing-tab-3').removeClass("active");
    $('.fixed-wing-tab-cont>div').fadeOut("fast",function(){
        $('#fixed-wing-tab-3').fadeIn("fast");
    });
});

</script>

我正在从jquery站点直接加载Jquery 1.9。现在，我遇到的问题是：页面打开时加载了第三个选项卡，没有问题。如果我单击转到第一个选项卡，它将完美运行：第三个选项卡淡出，第一个选项卡淡入，选项卡按钮中的“活动”状态从第三个移动到第一个。如果我然后选择转到第二个选项卡，它也可以完美运行。但是，如果我尝试从任何选项卡转到第三个选项卡或从第三个选项卡转到第二个选项卡，它会播放动画两次，这没有任何意义：所有三个选项卡都运行相同的代码。我一直在看代码一遍又一遍，我不明白为什么会发生这种情况 - 为什么第一个标签工作正常，但第三个标签有这样的问题？我尝试从HTML中的所有项目中删除“活动”状态（从而使标签/内容开始为空），问题仍然存在。

有人可以帮我吗？这对我没有任何意义：\

Answer 1

你正在淡出所有的DIV类.fixed-wing-tab-cont。因此，加载两次的内容实际上只是内容逐渐消失并逐渐消失。您可以使用jQuery中的CSS'not'选择器将活动类排除在DIV之外。变化

$('#wing-nav-3').click(function(){
    $('div.fixed-wing-nav-item').removeClass("active",function(){
        $('#wing-nav-3').addClass("active");
    });
    $('#fixed-wing-tab-3').removeClass("active");
    $('.fixed-wing-tab-cont>div').fadeOut("fast",function(){
        $('#fixed-wing-tab-3').fadeIn("fast");
    });
});

到

$('#wing-nav-3').click(function(){
    $('div.fixed-wing-nav-item').removeClass("active");
    $('#wing-nav-3').addClass("active");
    $('#fixed-wing-tab-3').removeClass("active");
    $('.fixed-wing-tab-cont>div:not(.active)').fadeOut("fast");
    $('#fixed-wing-tab-3').fadeIn("fast");
});

在这个实例中，您根本不需要使用回调函数。实际上，removeClass方法没有回调能力。您可能已经注意到，由于这个原因，您的活动选项卡类没有应用于您单击的选项卡。

Updated jsFiddle

Answer 2

您正确删除了fixed-wing-nav-item div中的'active'类，但始终从'#fixed-wing-tab-3'中删除'active'类，无论哪个标签处于活动状态。如果您从'.fixed-wing-tab-cont＆gt; div'中删除'有效'类，然后将'有效'类添加到固定翼标签，您就可以使用它。

Jquery click事件会重复...有时候

2 个答案: