Question

我正在尝试在单个网站上进行单页导航。基本上我只是显示一个div并隐藏剩余的页面。单击链接或按钮会显示一个新div并隐藏上一个div /页面。我的问题是如何让浏览器返回按钮工作？到目前为止，这是代码的简化版本 HTML：

<body>
      <!--Main page-->
      <div id="main-page">
            <a href="#page-1" class="btn btn-primary btn-lg" style="display: block;margin-left:33%; margin-right: 33%; margin-bottom: 50px;" role="button" id="nav-to-page-1-btn">
            <a href="#page-2" class="btn btn-primary btn-lg" style="display: block;margin-left:33%; margin-right: 33%; margin-bottom: 50px;" role="button" id="nav-to-page-2-btn">Page 2</a>
       </div>
       <div id="page-1">
            <a href="#main-page" class="btn btn-primary btn-lg" style="display: block;margin-left:33%; margin-right: 33%; margin-bottom: 50px;" role="button" id="back-to-main-page-">Main Page</a>
       </div>
       <div id="page-2">
            <a href="#main-page" class="btn btn-primary btn-lg" style="display: block;margin-left:33%; margin-right: 33%; margin-bottom: 50px;" role="button" id="back-to-main-page-">Main Page</a>
       </div>
</body>

使用Javascript：

$( document ).ready(function() {
    doOtherStuff();
    performNavigation();
 });
function performNavigation()
{
    //set intial state
    $("#main-page").show();
    $("#page-1").hide();
    $("#page-2").hide();

    $("#back-to-main-page-btn").bind("click", function () {
            location.reload();
            //Would like to avoid having to reload the page
        });


    $("#nav-to-page-1-btn").bind("click", function () {
            $("#main-page").hide();
            $("#page-1").show();
            $("#page-2").hide();
    });

    $("#nav-to-page-2-btn").bind("click", function () {
            $("#main-page").hide();
            $("#page-1").hide();
            $("#page-2").show();
    });

//Todo: make browser back button work   
}

也许我的方法错了是错的？有没有比隐藏和显示div更好的方法，这将使浏览器返回按钮更容易工作？

Answer 1

您必须使用History API或history.js告诉浏览器页面状态发生了变化。

这也意味着您应该将网页更改绑定到网址，以便可以通过#page-1访问www.yourdomain.com/page1。

我可以向本教程推荐如何从History API开始 https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

如何让浏览器返回按钮在单页面导航中工作

1 个答案: