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页时，即使用户重新加载了页面 ，我也希望通过data-rel =“ back”按钮返回到A页时仍可以看到第二个选项卡B． 但是，在重新加载页面B之后，当用户单击“后退”按钮并返回到页面A时，第二个选项卡不再设置为可见，而是第一个选项卡。

我如何在jQuery Mobile中实现用户重新加载（！）后从页面B记住用户在页面A上的选项卡选择？

Answer 1

您可以将dom-cache设置为true，以免重新加载页面A：

<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。