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更新网址。然后你可以用 onpopstate 检测来回移动并相应地调用您的 fadeIn 和 fadeOut 方法。