Question

好的，我正在尝试设计我的网站的移动版本，并且卡在我的菜单上。

基本上我在页面上运行了一个简单的onClick，所以如果用户决定他们不想查看菜单上的点击，那么他们可以点击该页面，菜单就会消失。

但我真正想要的是一种使用浏览器上的后退按钮从菜单返回的方法。我猜它需要某种事件或设置一些东西，但我不知所措。

我是新手，所以要温柔，我希望社区可以帮助我一点点开始。

我的主要问题是如何在我的HTML或JavaScript中使用浏览器上的后退按钮，我们将非常感谢有关如何继续操作的任何想法。

Answer 1

更新了仅限JS的版本： http://jsfiddle.net/0uk0g0qq/4/（适用于所有地方） :target实施是错误的。所以前一个没有工作。当用户直接在页面上执行操作时，哈希更改仅影响css，单击更改哈希的按钮，不幸的是，后退按钮不被视为页面的一部分

您需要的所有JavaScript都是：

var menu = document.getElementById('menu');
window.addEventListener('hashchange', function(e) {
    if (location.hash != "#menu") {
        menu.style.display = "none";
    } else if (location.hash == "#menu") {
        menu.style.display = "block";
    }
});

仅限Css版本:::

你只能使用css来做到这一点。是时候了解了:target选择器。

它允许您将样式应用于任何url散列片段，并且是页面上元素的id。

演示： http://jsfiddle.net/0uk0g0qq/1

所以我默认隐藏菜单，但如果匹配我会显示菜单。由于url中的hastags会影响浏览器历史记录，因此它可以完成您的要求。

第一次学习它真是太棒了。

#menu:target {
    display: block;
}

整个代码：

body {
    background-color: cornsilk;
}
.cont {
    width: 500px;
    margin: auto;
}

#menu {
    display: none;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    height: 100%;
    background-color: rgba(0,0,0,.3);
    margin: auto;

}

#menu > ul {
    width: 200px;

    list-style-type: none;
    background-color: #fff;
    margin: auto;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}

#menu > ul li {
    padding: 20px 10px;
}

#menu:target {
    display: block;
}

后退按钮和菜单导航

1 个答案: