jquery浏览内容和浏览器的后退按钮[重复]答案

【问题标题】：jquery to navigate through content and browser's back button [duplicate]jquery浏览内容和浏览器的后退按钮[重复]
【发布时间】：2018-08-10 02:11:18
【问题描述】：

我对 jquery 非常陌生——目前在导航菜单中单击相应按钮时，我使用它来显示和隐藏网页上的内容（div）。我大致这样做如下：

$(document).ready(function(){

   // show the "about" page
    $("#aboutButton").click(function(){
        $("#aboutPage").addClass("visible")
        $("#contactPage").removeClass("visible")
    });

   // show the "contact" page
    $("#contactButton").click(function(){
        $("#aboutPage").removeClass("visible")
        $("#contactPage").addClass("visible")
    });
});

虽然我很想知道如何更聪明地处理这个问题，但我最紧迫的问题是浏览器的后退按钮显然不能很好地处理这个问题。理想情况下，我希望它按预期工作：如果它被按下，我想回到我页面的最后一个可见部分/div。我多么怀疑我的方法通常是非常错误的......

如有任何提示，将不胜感激！谢谢

【问题讨论】：

标签： jquery css

【解决方案1】：

您可以使用history.pushState“操纵”浏览器的历史记录。

浏览器显示的url会改变，但不会加载新的url。

然后您可以检测到将事件处理程序（函数）分配给window.onpopstate的后退/前进按钮

这只是一个例子：

$(document).ready(function(){

   // show the "about" page
    $("#aboutButton").click(function(){
        $("#aboutPage").addClass("visible")
        $("#contactPage").removeClass("visible")

        history.pushState( {page: "about"}, "", "about");
    });

   // show the "contact" page
    $("#contactButton").click(function(){
        $("#aboutPage").removeClass("visible")
        $("#contactPage").addClass("visible")

        history.pushState( {page: "contact"}, "", "contact");
    });

    // detect browser's back/forward buttons

    window.onpopstate = function( e ) {
        if( e.state.page === 'about' ) {
            $("#aboutPage").addClass("visible")
            $("#contactPage").removeClass("visible")
        }

        if( e.state.page === 'contact' ) {
            $("#aboutPage").removeClass("visible")
            $("#contactPage").addClass("visible")
        }       
    };
});

pushState 接收访问者虚拟导航到的 URL 作为最后一个参数。第二个参数（在撰写本文时）未使用。

第一个参数是您根据需要构建的对象，可让您将信息存储在浏览器历史记录中。

当onpopstate 被触发（用户向后或向前导航）并且事件e 被传递给回调时，您可以从e.state 检索存储对象。

上面是简单的部分：现在更烦人了。

当您以编程方式操作 url 时，用户可以为这些 URL 中的任何一个添加书签或重新加载页面，并且网站应该做出相应的响应。

网站应该实际加载页面（并且不引发 404）并且 - 取决于 URL - 显示 #aboutPage 或 #contactPage。

供参考：Manipulating the browser history

【讨论】：