0

ajax を介してコンテンツを動的にロードするナビゲーションがあります。しかし、ページを更新するか、別の URL にアクセスして戻ると、現在のコンテンツが消え、最初のメニュー タブの下に古いコンテンツが表示されます。

この問題を解決する最善の方法は何ですか? コードを教えてください。

index.php には、要素 navigation.inc.php および main_container.inc.php が含まれます。

<?php include("inc/incfiles/header_registrated.inc.php"); ?>
<?php
if (!isset($_SESSION["userLogin"])) {
echo "<meta http-equiv=\"refresh\" content=\"0; url=http://localhost/project\">";
}
else {
echo "";
}
?>
<?php include("inc/incfiles/navigation.inc.php"); ?>
<?php include("inc/incfiles/main_container.inc.php"); ?>
<?php include("inc/incfiles/footer.inc.php"); ?>

ナビゲーション.inc.php:

      <div class="navigation">

        <ul>
            <li id="1">
                <div id="menuImage1" class="menuImage"></div>
                <div class="menuText"><p>Punkt 1</p></div>

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

    </div>

main_container.inc.php:

<div class="mainContainer">

        <div class="containerHeader">

            <div class="contentHeader">


            </div>

        </div>

        <div class="contentContainer">

            <div class="content">

            </div>

            <div class="advertisement">

            </div>


        </div>

    </div>

これで、div コンテンツ、cnotentHeader、および広告 (ファイル main_content.inc.php 内) が ajax によって埋められます。また、ナビゲーションにはいくつかの jquery 効果があり、ページの更新後も同じにする必要があります。

$(document).ready(function() {
$.get('inc/incfiles/content_container/header/1.php', function(data) {
    $('.contentHeader').html(data);
}); 

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

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

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

    current = quelle;

    // content
    $(".content").fadeOut(function() {
        $(this).load("inc/incfiles/content_container/content/" + quelle).fadeIn('normal');
    })

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

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

});

$(".navigation li").click(function() {
    $(".menuImage").removeClass("menuImageActive1");
    $(".menuImage").removeClass("menuImageActive2");
    $(".menuImage").removeClass("menuImageActive3");
    $(".menuImage").removeClass("menuImageActive4");
    $(".menuImage").removeClass("menuImageActive5");
    $(".menuImage").removeClass("menuImageActive6");
});

$("#1").mousedown(function() {
    $("#menuImage1").addClass("menuImageClick1"); // new class on mouse button press
});

$("#1").mouseup(function() {
    $("#menuImage1").removeClass("menuImageClick1");  //remove class after mouse button release
});

$("#1").click(function() {
    $("#menuImage1").addClass("menuImageActive1");
});



$("#2").mousedown(function() {
    $("#menuImage2").addClass("menuImageClick2"); // new class on mouse button press
});

$("#2").mouseup(function() {
    $("#menuImage2").removeClass("menuImageClick2");  //remove class after mouse button release
});

$("#2").click(function() {
    $("#menuImage2").addClass("menuImageActive2");
});



$("#3").mousedown(function() {
    $("#menuImage3").addClass("menuImageClick3"); // new class on mouse button press
});

$("#3").mouseup(function() {
    $("#menuImage3").removeClass("menuImageClick3");  //remove class after mouse button release
});

$("#3").click(function() {
    $("#menuImage3").addClass("menuImageActive3");
});



$("#4").mousedown(function() {
    $("#menuImage4").addClass("menuImageClick4"); // new class on mouse button press
});

$("#4").mouseup(function() {
    $("#menuImage4").removeClass("menuImageClick4");  //remove class after mouse button release
});

$("#4").click(function() {
    $("#menuImage4").addClass("menuImageActive4");
});



$("#5").mousedown(function() {
    $("#menuImage5").addClass("menuImageClick5"); // new class on mouse button press
});

$("#5").mouseup(function() {
    $("#menuImage5").removeClass("menuImageClick5");  //remove class after mouse button release
});

$("#5").click(function() {
    $("#menuImage5").addClass("menuImageActive5");
});



$("#6").mousedown(function() {
    $("#menuImage6").addClass("menuImageClick6"); // new class on mouse button press
});

$("#6").mouseup(function() {
    $("#menuImage6").removeClass("menuImageClick6");  //remove class after mouse button release
});

$("#6").click(function() {
    $("#menuImage6").addClass("menuImageActive6");
});




$("#1").click(function(){

    $(".navigationDart").animate({ 
        top: "16px"
            }, 500 );
    });
$("#2").click(function(){
    $(".navigationDart").animate({ 
        top: "88px"
            }, 500 );
    // Get the src of the image
    // var src = $(this).css("top");

    // Send Ajax request to backend.php, with src set as "img" in the POST data
    // $.post("/home.php", {"#2": top});
    });
$("#3").click(function(){
    $(".navigationDart").animate({ 
        top: "160px"
            }, 500 );
    });
$("#4").click(function(){
    $(".navigationDart").animate({ 
        top: "232px"
            }, 500 );
    });
$("#5").click(function(){
    $(".navigationDart").animate({ 
        top: "304px"
            }, 500 );
    });
$("#6").click(function(){
    $(".navigationDart").animate({ 
        top: "376px"
            }, 500 );
    });
});
4

2 に答える 2

0

セッションを使用できます。ajaxを介してコンテンツをロードする場合、その応答をセッション変数に格納し、ナビゲーションでif条件if（isset（$ _ SESSION ['ajaxresponse']））などを追加できます。

于 2012-11-22T11:15:04.283 に答える
0

わかりました。ajax リクエストを処理する php ファイルに、次の行を追加してください。

// assuming that your contents can be stored in a variable $contents
$_SESSION['mycontent'] = $contents;

ajax レスポンスを表示する場所に、次のコード行を追加します。

if(isset($_SESSION['mycontent']) && !empty($_SESSION['mycontent']))
echo $_SESSION['mycontent'];

session_start(); を宣言していることを確認してください。

これが役立つことを願っています！ごめん！あなたの問題のシナリオを理解できなかった場合。

于 2012-11-22T12:59:16.713 に答える