jquery手機歷史記錄返回

Question

頁面我使用js來顯示和隱藏一些元素，但是當我使用瀏覽器返回時出現問題。

<div data-role="page"> 
    <div class="step1"> 
     step1 content... 
     <a href="javascript:void(0)" class="nextBtn">next</a> 
    </div> 
    <div class="step2" style="display:none"> 
     step2 content... 
     <a href="javascript:void(0)" class="okBtn">next</a> 
    </div> 
    <div class="step3" style="display:none"> 
     step3 content... 
     <a href="javascript:void(0)" class="goBtn">next</a> 
    </div> 
    <script> 
    some script... 
    $('.nextBtn').click(function(){ 
     ok = do something... 
     if(ok){ 
      $('.step1').hide(); 
      $('.step2').show(); 
     } 
    }); 
    $('.okBtn').click(function(){ 
     ok = do something... 
     if(ok){ 
      $('.step2').hide(); 
      $('.step3').show(); 
     } 
    }); 
    </script> 
</div> 

但是當我使用瀏覽器後退button.there有問題。我的意思是當'step2'顯示時，我點擊返回按鈕，我想要'step1'顯示。

Answer 1

我建議你使用https://github.com/browserstate/History.js 操縱瀏覽器

Answer 2

的歷史如果你想.step1當加載頁面可見，這裏的代碼。

$(document).on('pagebeforeshow', '[data-role="page"]', function() { 
$('div.step1').show(); 
});