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(); 
});