引导导航栏和 jquery 加载功能的历史功能答案

【问题标题】：history function for bootstrap navbar and jquery load-function引导导航栏和 jquery 加载功能的历史功能
【发布时间】：2017-02-26 09:57:16
【问题描述】：

我是这个领域的新手。我用 bootstrap 3 和“加载”功能构建了一个导航栏。如果我想使用浏览器的后退按钮，它不起作用。我必须做些什么才能让它发挥作用？

这是我的简化代码：

index.html:

 <nav class="navbar navbar-inverse navbar-fixed-top text-center">
     <div class="container">
         <div id="navbar" class="navbar-collapse collapse">
             <ul class="nav navbar-nav navbar-right">
                <li><a href="#" onclick="$('#main').load('files/link1.html');  return false;">Link1</a></li>
                <li><a href="#" onclick="$('#main').load('files/link2.html');  return false;">Link2</a></li>
             </ul>
         </div>
     </div>
 </nav>

感谢舒尔茨

【问题讨论】：

If I want to use the back button of the browser, it does not work 是什么意思？请尝试更具体-单击后退按钮时您期望发生什么-如果您希望浏览器记住您正在执行的操作的历史记录，那么您必须告诉它-在此处搜索“手动添加到历史”
我的意思是，我先按 Link1，然后按 Link2。显示 Link2 的内容。然后我按下浏览器的后退按钮。现在应该加载并显示 Link1 的内容。

标签： javascript jquery html twitter-bootstrap browser-history

【解决方案1】：

没有简单的方法可以做到这一点。您必须使用history 对象并在每次单击以后想要返回的内容时更改 URL。

基本上点击你不仅会加载远程内容，还会更新 URL。您还必须在 URL 中使用井号 (#)，以便页面不会刷新。这意味着为您的应用创建一个路由机制。

【讨论】：