javascript - 手动添加浏览器历史记录条目(跨浏览器)

Question

我不知道是否有可能以任何方式实现我想做的事情。 我得到了包含一些部分的单页网站。像这样的事情:

<div class="page pageOne"></div>

<div class="page pageTwo"></div>

<div class="page pageThree"></div>

<div class="page pageFour"></div>

当您打开网站时，第 2、3 和 4 页显示 display:none ，第一个页面显示 display:block。当我单击导航中的链接时，当前“页面”会淡出，无论您单击什么链接，所属部分都会淡入。链接如下所示:

<a class="pageChange" href=".pageFour">Four</a>

这是 jQuery 代码:

$(".pageChange").click(function(e){
    e.preventDefault();
    var href = $(this).attr("href");
    $(".page").fadeOut(200);
    setTimeout(function(){
        $(href).fadeIn();
    }, 200);
});

非常明显的是，当我单击浏览器后退按钮时，它不会淡出前一部分。它只会返回到我打开的上一个网站。
< br/>所以我的问题是:有没有办法在点击链接时在浏览器中添加历史记录条目？这样我就可以按后退按钮，然后它就会淡出上一部分？
为了在单击链接之前获取可见部分，我这样做了:

var currentPage = $(".page:visible").attr('class').split(' ')[1];

但不幸的是，这对我想要实现的目标没有用。

如果有人能为我提供一些如何解决这个问题的帮助(或者如果可能的话)，我会非常高兴

Answer 1

您必须使用浏览器History API更新 URL。然后你可以用 onpopstate 检测来回运动。并相应地调用您的 fadeIn 和 fadeOut 方法。