Question

我正在使用HTML5历史记录API开发单页应用程序。这是我的代码的一个片段，它仅控制导航栏：

EJS / HTML

<div id="nav-bar">
    <% if(home) { %><div id="tab-home" class="tab tab-active"><% } else { %><div id="tab-home" class="tab"><% } %>Home</div>
    <% if(login) { %><div id="tab-login" class="tab tab-active"><% } else { %><div id="tab-login" class="tab"><% } %>Login</div>
    <% if(signup) { %><div id="tab-signup" class="tab tab-active"><% } else { %><div id="tab-signup" class="tab"><% } %>Sign Up</div>
    <% if(about) { %><div id="tab-about" class="tab tab-active"><% } else { %><div id="tab-about" class="tab"><% } %>About</div>
</div>

JavaScript

$(function() {
    $(".tab").on("click", function(event) {
        if(!event.target.classList.contains("tab-active")) {
            $(".tab").removeClass("tab-active");
            event.target.classList.add("tab-active");
            window.history.pushState({id: event.target.id}, "", event.target.id.substring(4));
        }
    });
});

window.onpopstate = function(event) {
    $(".tab").removeClass("tab-active");
    $("#".concat(event.state.id)).addClass("tab-active");
};

我遇到的问题是，当用户导航回到加载的原始状态时，函数window.popstate不会以我用window.history.pushState设置的自定义状态调用，该状态告诉页面如何改变。我认为这是因为原始状态不是使用历史记录API手动创建的，但是我该如何解决？

HTML历史记录API：单页应用程序初始页面导航问题

0 个答案: