javascript - Jquery click 事件重复自身......有时

Question

我在编写一个小的 jquery 补码时遇到了一个奇怪(烦人)的问题。它旨在控制页面上内容的小选项卡式导航，这并不是什么大问题。它目前有 3 个按钮(选项卡)，当您单击任何选项卡时，系统会淡出当前选项卡和内容并更改为新的。

jsfiddle

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

您正在淡出 .fixed-wing-tab-cont 类下的所有 DIV。所以内容加载两次实际上只是内容淡出和淡入。您可以使用 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