0

我正在编码的一个小的 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。现在，我遇到的问题是：页面打开时加载了第三个选项卡，没有问题。如果我单击转到第一个选项卡，它会完美运行：第三个选项卡淡出，第一个选项卡淡入，并且选项卡按钮的“活动”状态从第三个移到第一个。如果我然后选择转到第二个选项卡，它也可以完美运行。但是，如果我尝试从任何选项卡转到第三个或从第三个到第二个，它会播放两次动画，这毫无意义：所有三个选项卡都运行相同的代码。我已经一遍又一遍地查看代码一个小时，但我不明白为什么会发生这种情况 - 为什么第一个选项卡可以完美运行，但第三个选项卡有这样的问题？我试过删除“活动”

有人能帮我一下吗？这对我来说没有任何意义：\

4

2 回答 2

2

您正在淡出 .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 方法没有回调能力。您可能已经注意到，您的活动选项卡类并未因此应用于您单击的选项卡。

更新了 jsFiddle

于 2013-11-08T20:42:46.237 回答
0

您正确地从固定翼导航项目 div 中删除了“活动”类，但始终从“#fixed-wing-tab-3”中删除“活动”类，无论哪个选项卡处于活动状态。如果您从 '.fixed-wing-tab-cont>div' 中删除了 'active' 类，然后将 'active' 类添加到您的 fadeIn 它应该可以工作。

于 2013-11-08T20:21:44.127 回答