2

ホームページに外部コンテンツをロードします。すべてが正常に機能しています。しかし、私には 1 つの問題があります。現在のリンクをクリックすると、コンテンツも読み込まれます。しかし、コンテンツが別のコンテンツである場合にのみロードされるようにしたいと考えています。

$(document).ready(function() {
    $(".navigation li").click(function() {
        var quelle = $(this).attr('id') + ".php";
        // content
        $(".content").fadeOut(function() {
            $(this).load("content/" + quelle).fadeIn('normal');
        })

        // advertisement
        $(".advertisement").fadeOut(function() {
            $(this).load("advertisement/" + quelle).fadeIn('normal');
        })

        // header
        $(".contentHeader").fadeOut(function() {
            $(this).load("header/" + quelle).fadeIn('normal');
        })

    });
});

ここにHTMLがあります。そしてええ...クリックイベントハンドラーを忘れました;）

<div class="container">

    <div class="navigation">

        <ul>
            <li id="1">
                <div class="menuImage"></div>
                <div class="menuText"><p>1</p></div>
            </li>
            <li id="2">
                <div class="menuImage"></div>
                <div class="menuText"><p>2</p></div>
            </li>
            <li id="3">
                <div class="menuImage"></div>
                <div class="menuText"><p>3</p></div>
            </li>
            <li id="4">
                <div class="menuImage"></div>
                <div class="menuText"><p>4</p></div>
            </li>
            <li id="5">
                <div class="menuImage"></div>
                <div class="menuText"><p>5</p></div>
            </li>
            <li id="6">
                <div class="menuImage"></div>
                <div class="menuText"><p>6</p></div>
            </li>
        </ul>

    </div>

    <div class="mainContainer">

        <div class="containerHeader">

            <div class="contentHeader">
                <p>old header</p>
            </div>

        </div>

        <div class="contentContainer">

            <div class="content">
                <p>old content</p>
            </div>

            <div class="advertisement">
                <p>old advertisement</p>
            </div>


        </div>

    </div>

</div>
4

1 に答える 1

0

次のように現在の ID を保存できます。

$(document).ready(function() {
    var current;
    $(".navigation li").click(function() {
        var quelle = $(this).attr('id') + ".php";
        if(current === quelle) {
            return;
        }

        current = quelle;
        // content
        $(".content").fadeOut(function() {
            $(this).load("content/" + quelle).fadeIn('normal');
        })

        // advertisement
        $(".advertisement").fadeOut(function() {
            $(this).load("advertisement/" + quelle).fadeIn('normal');
        })

        // header
        $(".contentHeader").fadeOut(function() {
            $(this).load("header/" + quelle).fadeIn('normal');
        })

    });
});
于 2012-11-20T20:55:24.240 に答える