javascript - 单页网站和后退按钮困惑

Question

我花了几个小时寻找如何做到这一点，尝试了不同的事情，但没有成功。

我想做的就是制作一个单页网站，显示/隐藏 div 并执行一个简单的动画。我已经让它做我想要的一切，并且看起来像我想要的样子:当您单击导航栏中的链接时，会运行一个脚本，该脚本会隐藏一个 div，显示另一个 div，并更改标题的大小图像。这一切都是用简单的 JS 和 CSS 完成的，但是后退按钮不起作用，即使我将链接设置为哈希 anchor ，URL 也不会更改。也许将所有 div 放在索引上并显示/隐藏它们甚至不是执行此操作的最佳方法。

HTML5 History API 的实现(如果我什至应该使用它的话)让我感到困惑，而且我似乎找不到一个简单直接的工作示例。

任何人都可以向我指出类似这样工作正常的 fiddle 或代码笔吗？

这是我正在做的事情的基础:

链接:

<a href="#work" onclick="work()">Work</a>

功能:

    function work() {
        document.getElementById("work").style.cssText = 'display: block; opacity: 1;'
        document.getElementById("about").style.cssText = 'display: none; opacity: 0;'
        document.getElementById("hero").style.cssText = 'height: 85px; transition: 200ms ease-in-out;'
        document.getElementById("introcontainer").style.cssText = 'visibility: hidden; opacity: 0;  transition: visibility 200ms, opacity 200ms linear;';
    }

当我的“工作”链接被点击时，“关于”被隐藏，“简介容器”被隐藏，“英雄”的高度被改变，并且“工作”被显示。我还有另外两个“页面”，它们的功能相同。

Answer 1

History API 就是专门针对此类场景而设计的，而不是扫描 url 哈希并运行复杂的 if else您可以使用pushState来跟踪应用程序状态并决定每个状态会发生什么。

此 API 的要点是，当您使用 pushState 推送某些内容时，它会在 popState 上返回给您(点击返回按钮时)。

history.pushState(objState,title,Url);

第一个参数是我们传递有助于识别应用程序状态的内容的地方，您可以放置​​任何内容，但它必须包含在一个对象中

我将忽略第二个(传递任何字符串)。第三个是执行 PushState() 时 URL 栏相对于当前路径显示的内容

假设你有这样的导航

<ul id="nav">
    <li><a href="about" title="About us">About</a></li>
    <li><a href="contact" title="Contact Us">Contact</a></li>
    <li><a href="team" title="Team">Team</a></li>
</ul>

为推送状态分配点击处理程序

$('a').click(function(e){
    e.preventDefault();
    var targetUrl = $(this).attr('href');
    history.pushState({url:targetUrl}, targetUrl, targetUrl);
    applyState(targetUrl); //will show div associated with this anchor 
});

现在，当用户单击链接时，您需要推送与此相关的内容，例如其 href 或标题，以便稍后识别它(我已经使用了它的 href，但您可以自由使用任何内容)，在推送后，您可以制作动画并显示与此链接关联的 div，例如。如果我点击<a href="work">然后按“work”并显示保存您工作详细信息的 div(同时最小化/隐藏其他 div)。您的网址为 xyz/work atm

下一步，如果我单击<a href="contact">联系人的状态被推送，并且以同样的方式它关联的 div 被突出显示。您的 url 为 xyz/contact atm

现在，当我回击时，历史记录将会弹出，并且网址将从xyz/contact更改为xyz/work，弹出最新的非事件状态(wiz。工作而不是联系! )

如果您为 onpopstate 分配了处理程序，您可以捕获弹出的内容

window.onpopstate = function(e) {
    var popie = e.state ? e.state.url : null;
    applyState(popie);
}

所以 popie 将是“工作”，applyState 将执行其精美的动画并显示工作 div

applyState 可能看起来像

function  applyState(url) {
    $('#status').text('Current active page ' + url);
    switch(url){
     case "work": //show work details div hide others
    break;

     case "about": //show aboutdetails div hide others
    break;

 }