0

ナビゲーションの助けを借りてajaxを使用して外部コンテンツをロードします。

すべてが正常に機能しています。また、ユーザーがメニュータブを頻繁にクリックしている場合、同じコンテンツを再度読み込むことはできません。ただし、ユーザーがWebサイトに初めてアクセスする場合は、コンテンツを再度ロードできます（最初のメニュータブ）。

これがユーザーには不可能であることを望んでいます。

JavaScriptは次のとおりです。

$.get('header/1.php', function(data) {
    $('.contentHeader').html(data);
}); 

$.get('content/1.php', function(data) {
    $('.content').html(data);
}); 

$.get('advertisement/1.php', function(data) {
    $('.advertisement').html(data);
}); 
var current;
$(".navigation li").click(function() {
    var source = $(this).attr('id') + ".php";

    // the current content doesn't load again
    if(current === source) {
        return;
    }

    current = source;

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

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

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

});

これがhtmlコードです：

<div class="navigation">

        <ul>
            <li id="1">
                <div id="menuImage1" class="menuImage"></div>
                <div class="menuText"><p>1</p></div>
            </li>
            <li id="2">
                <div id="menuImage2" class="menuImage"></div>
                <div class="menuText"><p>2</p></div>
            </li>
            <li id="3">
                <div id="menuImage3" class="menuImage"></div>
                <div class="menuText"><p>3</p></div>
            </li>
            <li id="4">
                <div id="menuImage4" class="menuImage"></div>
                <div class="menuText"><p>4</p></div>
            </li>
            <li id="5">
                <div id="menuImage5" class="menuImage"></div>
                <div class="menuText"><p>5</p></div>
            </li>
            <li id="6">
                <div id="menuImage6" class="menuImage"></div>
                <div class="menuText"><p>6</p></div>
            </li>
        </ul>

    </div>
4

3 に答える 3

1

current変数を初期化する必要があると思います。

すなわち-：

$.get('header/1.php', function(data) {
    $('.contentHeader').html(data);
}); 

$.get('content/1.php', function(data) {
    $('.content').html(data);
}); 

$.get('advertisement/1.php', function(data) {
    $('.advertisement').html(data);
}); 
var current = "1.php";
$(".navigation li").click(function() {
    var source = $(this).attr('id') + ".php";

    // the current content doesn't load again
    if(current === source) {
        return;
    }

    current = source;

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

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

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

});
于 2012-11-22T09:35:57.120 に答える
1

次の行を置き換えます。

var current;

これのために：

var current = '1.php';
于 2012-11-22T09:36:07.967 に答える
0

のようなものはどうですか？：

if($(_element).is('visible')){
 // do not load again content
}else{
//load content
}

_elementロードされたばかりのコンテンツのIDまたはクラスである必要があります:)

于 2012-11-22T09:35:10.023 に答える