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 请求提供服务的 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 回答
0

您可以使用会话。当您通过 ajax 加载内容时，将该响应存储到会话变量中，然后在导航中添加 if 条件 if(isset($_SESSION['ajaxresponse'])) 等。

于 2012-11-22T11:15:04.283 回答