0

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」が表示されます。

4

2 に答える 2

1

.step1ページを読み込んだときに表示されるようにしたい場合は、次のコードを使用します。

$(document).on('pagebeforeshow', '[data-role="page"]', function () {
 $('div.step1').show();
});
于 2013-03-27T14:49:44.393 に答える
0

https://github.com/browserstate/History.js を使用してブラウザの履歴を操作することをお勧めします

于 2013-03-27T13:05:29.237 に答える