Jquery 如何使浏览器返回按钮在单页导航中工作_Jquery_Browser_Back

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

jquery browser

Jquery 如何使浏览器返回按钮在单页导航中工作,jquery,browser,back,Jquery,Browser,Back,我试图使单页导航工作在一个简单的网站上。基本上我只是显示一个div并隐藏其余的页面。单击链接或按钮显示新的div并隐藏上一个div/页面。我的问题是如何让浏览器返回按钮工作？？这是迄今为止代码的简化版本 HTML: 也许我的方法是错的是错的？有比隐藏和显示div更好的方法吗？隐藏和显示div会使浏览器返回按钮更容易工作？您必须使用History API或History.js告诉浏览器页面的状态已更改这也意味着您应该将页面更改绑定到URL，以便可以通过www.yourdomain.com/pa

我试图使单页导航工作在一个简单的网站上。基本上我只是显示一个div并隐藏其余的页面。单击链接或按钮显示新的div并隐藏上一个div/页面。我的问题是如何让浏览器返回按钮工作？？这是迄今为止代码的简化版本 HTML:

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

您必须使用History API或History.js告诉浏览器页面的状态已更改

这也意味着您应该将页面更改绑定到URL，以便可以通过

www.yourdomain.com/page1

访问例如

#page-1

我可以重新编写本教程，介绍如何从历史API开始

<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>

$( 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   
}