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 をロードしています。今、私が抱えている問題は次のとおりです。3 番目のタブがロードされた状態でページが開きますが、問題はありません。クリックして最初のタブに移動すると、完全に機能します。3 番目のタブがフェードアウトし、最初のタブがフェードインし、タブ ボタンの「アクティブ」状態が 3 番目から最初のタブに移動します。次に、2 番目のタブに移動することを選択した場合も、完全に機能します。ただし、任意のタブから 3 番目のタブ、または 3 番目から 2 番目のタブに移動しようとすると、アニメーションが 2 回再生されます。これはまったく意味がありません。3 つのタブはすべて同じコードを実行しています。私はコードを 1 時間何度も見てきましたが、なぜこれが起こっているのかわかりません。最初のタブは完全に機能するのに、3 番目のタブにはそのような問題があるのはなぜですか? 「アクティブ」を削除しようとしました

誰でもここで私を助けることができますか? これは私にはまったく意味がありません :\

4

2 に答える 2

0

fixed-wing-nav-item div から「active」クラスを正しく削除しますが、アクティブなタブに関係なく、常に「#fixed-wing-tab-3」から「active」クラスを削除します。「.fixed-wing-tab-cont>div」から「active」クラスを削除し、「active」クラスを fixed-wing-tab に追加すると、フェードインが機能するはずです。

于 2013-11-08T20:21:44.127 に答える