0

私の古い質問: 1 つのページのフェードインとフェードアウトの遷移ロジック

コードはかなりうまく機能しますが、問題があります。私のナビゲーション システムには、ドロップダウン メニューとも呼ばれるサブメニュー付きのメニューがあります。そのため、コンテンツなしでサブメニューのメニュー リンクをクリックすると、実際にコンテンツ クラスを持つものをクリックするまで、コンテンツ ページが空白で読み込まれます。

簡単な jsFiddle の例を次に示します: http://jsfiddle.net/QuKhN/1/

メニューリンクIDに対応するコンテンツがある場合にのみ、コンテンツをロードしたい。したがって、この例で「お問い合わせ」をクリックした場合、「contactus content」という存在しない div をロードしようとはしません。

これは可能ですか？hasClass() 関数でいくつか試してみましたが、成功しませんでした。

時間を割いて読んで理解していただきありがとうございます。

4

4 に答える 4

1

表示しようとしている要素を選択し、length プロパティを使用して、そのような要素があることを確認できます。長さはゼロより大きくなります。

このようなもの：

$("ul li a ").click(function(){
    var cls = $(this).attr('id');
    // Fade out the previous content no matter what
    $(".content").fadeOut(500);
    // Check if there is content to display using length
    if ($('.' + cls).length > 0) {
       // Will only display content if it exist
       $('.' + cls).delay(500).fadeIn(1000);
    }
    return false;
})​;​

これが実際の例です：http://jsfiddle.net/QuKhN/2/

ノート：

これは、他のいくつかの要素でこれらのクラスを使用しないことに依存していますが、スクリプトの残りの部分も使用しているため、この場合は問題ないと思います。

于 2012-07-07T11:09:35.987 に答える
1

試してくださいhasClass：

$("ul li a ").click(function(){
    var cls = $(this).attr('id')
    $(".content").fadeOut(500);
    if($("div").hasClass(cls)){
       $('.' + cls).delay(500).fadeIn(1000);
    }
    return false;
})​
于 2012-07-07T11:10:24.567 に答える
1

あなたはこれを試すことができます：

$("ul li a ").click(function() {
    var cls = $(this).attr('id')
    if ($('div.content.' + cls).length > 0) {  
        $(".content").fadeOut(500);
        $('.' + cls).delay(500).fadeIn(1000);
    }
    return false;
})

デモ

于 2012-07-07T11:12:15.190 に答える
1 
$("ul li a").filter(function(){
    return $('.'+this.id).length>0;
}).click(function(){
    var cls = $(this).attr('id')

    $(".content").fadeOut(500);
    $('.' + cls).delay(500).fadeIn(1000);
    return false;
})​

デモ

于 2012-07-07T11:13:25.197 に答える