Question

我一直在寻找关于如何做到这一点，尝试不同的事情而不是成功的几个小时。

我想做的就是制作一个单页网站，显示/隐藏div并做一个简单的动画。我已经让它做了我想做的一切，看起来我希望它看起来的方式：当你点击导航栏中的链接时，有一个运行的脚本隐藏一个div，显示另一个div，并且还改变了标题的大小图片。这一切都是通过简单的JS和CSS完成的，但后退按钮不起作用，即使我将链接设置为哈希锚点，URL也不会改变。也许在索引上显示所有div并显示/隐藏它们甚至不是最好的方法。

HTML5历史API的实现（如果我甚至应该使用它）让我感到困惑，我似乎无法找到一个简单直接的工作示例。

有人能指点我这样的小提琴或编码器正常工作吗？

这是我正在做的基础：

链接：

<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

历史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">然后按“工作”并显示包含您的工作详细信息的div（同时最小化/隐藏其他div）。您的网址读取 xyz / work atm

接下来，如果我点击<a href="contact">状态进行联系，则会突然显示相关联的div会突出显示。您的网址会显示 xyz / contact atm

现在当我回击历史记录时会弹出并且网址会从 xyz / contact 更改为 xyz / work 弹出最新的非活动状态（即工作而不是联系！）

如果您已为onpopstate指定了处理程序，则可以捕获弹出的内容

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

所以popie将是“work”，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;

 }

单页网站和后退按钮混淆

1 个答案: