Как заставить кнопку возврата браузера работать в одностраничной навигации

Я пытаюсь сделать работу с одной страницей на простом веб-сайте. В основном я просто показываю один div и оставляю оставшиеся страницы. Щелчок по ссылке или кнопкам показывает новый div и скрывает предыдущий div/page. Моя проблема заключается в том, как заставить кнопку возврата браузера работать? Это Simplied версия кода до сих пор 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, что упростит работу кнопки возврата браузера?

источник

2014-10-18 jacob

https://github.com/browserstate/history.js/ –

-1

вам необходимо использовать API истории или history.js, чтобы сообщить браузеру о состоянии страницы.

Это также означает, что вы должны привязать свои страницы к URL-адресам, чтобы, например, #page-1 мог получить доступ через www.yourdomain.com/page1.

Я рекомендую этот учебник, как начать с API истории https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

источник

2014-10-18 22:14:27 ProblemsOfSumit

Как заставить кнопку возврата браузера работать в одностраничной навигации

ответ

Смежные вопросы