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>

我的问题：

当在页面A上时，我选择了第二个标签，然后从那里转到第B页，当我通过data-rel =＆＃34;返回＆＃34;返回到页面A时，我希望第二个标签仍然可见。按钮即使用户重新加载了页面B 。但是，在重新加载页面B后，当用户单击后退按钮并返回到页面A时，第二个选项卡不再设置为可见，而是第一个。

如何在jQuery Mobile中实现在重新加载（！）之后从页面B记住我在第A页上的选项卡选择，用户返回到页面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。

jQuery Mobile：data-rel =＆＃34; back＆＃34;页面重新加载

2 个答案: