Question

我整晚都在看这个电路板，我没有发现任何能够满足我需要的答案，所以我会问。

这是我正在做的基本想法。

在页面上加载，淡入并显示默认页面。
用户点击导航链接（a.navLink）。
div＃content淡出，调用函数重定向。
div＃content淡入新内容。

我有大约90％但是，这不太对。我正在使用PHP Switch使用$ _GET superarray管理网站上的内容。我的基本开关结构如下：

switch( $_GET['page'] ){
  default:
    //DISPLAY HOME PAGE
  break;

  case "story":
    // DISPLAY STORY
  break;

  case "contact":
    // DISPLAY CONTACT  
  break;    
}

依旧......

我用来执行淡入/淡出操作的JQuery如下：

$("#content").css("display", "none");

$("#content").fadeIn(1000);

$("a.navLink").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("#content").fadeOut(500, redirectPage);      

    function redirectPage() {
        window.location = linkLocation;
    } 

});

当前代码成功淡出，更改页面并淡入，但问题是网站重新加载，导致我在页面顶部的旋转横幅重新启动。此外，页面从顶部开始，就像刚刚加载了网站一样。我知道这可能需要一个AJAX函数，但我使用AJAX的经验很少（我常常像瘟疫一样避免它）。

我使用我所拥有的交换结构非常重要，而且我没有太大的成功。我将使用的URL是DOMAIN.COM/index.php?page= pageName 。同样，这种结构非常重要，无法改变。

对此的任何见解都会很棒。（再一次，我理解这个问题类型可能之前已被问过，但我觉得我最多需要一行，而我正试图找出那是什么）

Answer 1

而不是

window.location = linkLocation;

使用Ajax仅重新加载#content：

$( "#content" ).load(linkLocation, function(){
    $('#content').fadeIn(500, function(){
        // do something when the re-load is finished
    });
});

您无法通过AJAX更改窗口的网址，但您可以更改window.location.hash。其他人（在评论中）已提到使用history API。

更改div＃内容而不使用Jquery重新加载

1 个答案: