0
我正在尝试在单个网站上进行单页导航工作。基本上我只显示一个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更好的方法，这将使浏览器后退按钮更容易工作？
https://github.com/browserstate/history.js/ – 2014-10-18 21:46:47