jQuery Mobile：data-rel =「back」在頁面重新加載後無法正常工作

Question

在我的jQuery手機頁面上，我有兩個頁面：頁面A和B.頁面A包含一個標籤框容器。每個盒子包含不同的文字與鏈接到頁面B.

A頁：

<div id="testtab-con"> 
     <ul> 
      <li><a href="javascript:void(0)" title="tab1">Testtab #1</a></li> 
      <li><a href="javascript:void(0)" title="tab2">Testtab #2</a></li> 
      <li><a href="javascript:void(0)" title="tab3">Testtab #3</a></li> 
     </ul> 
     <div id="tab1" class="testtab"> 
      <p>Content Tab 1</p> 
      <a href="http://www.mypage.com/pageB">link to page B</a> 
     </div> 
     <div id="tab2" class="testtab" style="display:none"> 
      <p>Content Tab 2</p> 
      <a href="http://www.mypage.com/pageB">link to page B</a> 
     </div> 
     <div id="tab3" class="testtab" style="display:none"> 
      <p>Content Tab 3</p> 
      <a href="http://www.mypage.com/pageB">link to page B</a> 
     </div> 
    </div> 

    <script type="text/javascript"> 
     $('#testtab-con li a').on('click', function() { 
      var targetTab = $(this).attr('title'); 

      $('.testtab').hide(); 
      $('#' + targetTab).show(); 
     }) 
    </script> 

網頁B：

<a href="#" class="ui-btn" data-rel="back">back</a> 

<p>Content of page B... ... ...</p> 

我的問題：

在頁面AI上選擇第二個選項卡，然後從該選項卡開始第B頁，即使用戶重新加載了頁面B，我仍想通過data-rel =「back」按鈕返回到頁面A時，第二個標籤仍然可見。但是，在重新加載頁面B之後，當用戶單擊後退按鈕並返回到頁面A時，第二個選項卡不會再設置爲可見，而是第一個。

如何在jQuery Mobile中實現我在頁面A上的標籤選擇在從頁面B重新加載（！）後回到頁面A時記住？

Answer 1

可以設置DOM緩存爲真，不重新載入網頁答：

<div data-dom-cache="true" data-role="page"> 
    ... 
</div> 

另一種方式：

函數添加到您的鏈接，如：

<a href="#" class="ui-btn" onclick="switch_page('page_b','page_a');">back</a> 

<script> 
function switch_page(page_current, page_target){ 
    $('#'+page_current).hide(); 
    $('#'+page_target).show(); 
} 
</script> 

Answer 2

您可以使用sessionStorage保存當前選定的選項卡並在重新加載pageA時重新加載：

$(document).on("pagecreate","#pageA", function(){ 

    var savedTab = sessionStorage.getItem('selTab'); 
    if ($('#' + savedTab).length == 1){ 
     $('.testtab').hide(); 
     $('#' + savedTab).show();   
    } 

    $('#testtab-con li a').on('click', function() { 
     var targetTab = $(this).attr('title'); 
     sessionStorage.setItem('selTab', targetTab); 

     $('.testtab').hide(); 
     $('#' + targetTab).show(); 
    }); 

}); 

如果要在會話之間重新加載相同的選項卡，可以使用localStorage而不是sessionStorage。