jquery - 不要再次加载当前内容

Question

我在主页中加载外部内容。一切正常。但我有一个问题。如果我单击当前链接，则内容也在加载。但我希望内容只有在它是另一个内容时才会加载。

$(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>

Answer 1

您可以像这样保存当前 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');
        })

    });
});