Question

今天我第一次使用历史API并遇到了一个问题： <
第2,3和4节得到display:none，第一个得到display:block。当我单击导航中的链接时，当前“页面”淡出，所属部分淡入。

为了能够使用浏览器“历史记录按钮”进行导航，URL随pushState一起变化，我创建了该功能：

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

history.pushState(null, null, href + "/");

window.onpopstate = function(event) {
    $(".page").fadeOut(200);
    setTimeout(function(){
        $("." + currentPage).fadeIn();
    }, 200);
};

变量currentPage在单击链接时获取可见部分的类名。所以要“回去”它只会淡化那个班级。

很明显，你不能用这种方法多次返回（并继续）。我怎样才能让它发挥作用，我可以多次回去继续前进呢？我用一个完整的例子准备了一点codepen。（无法制作片段，因为您需要返回，这在片段中是不可能的）

pushState / onpopstate - 返回多个状态

0 个答案: