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