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>

但是当我使用浏览器后退按钮时，有一个问题。我的意思是当'step2'显示时，我点击后退按钮，我想去'step1'显示。

Answer 1

如果您希望在加载页面时看到.step1，则此处为代码。

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

Answer 2

我建议你使用https://github.com/browserstate/History.js 操纵浏览器的历史记录

jquery移动历史回来了

2 个答案: