jQuery Mobile：页面重新加载后 data-rel="back" 无法正常工作答案

【问题标题】：jQuery Mobile: data-rel="back" does not work properly after page reloadjQuery Mobile：页面重新加载后 data-rel="back" 无法正常工作
【发布时间】：2015-10-27 09:15:38
【问题描述】：

在我的 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="back" 按钮返回页面 A 时第二个选项卡仍然可见 当用户重新加载页面 B。但是，在重新加载页面 B 后，当用户单击返回按钮并返回到页面 A 时，第二个选项卡不再设置为可见，而是第一个。

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

【问题讨论】：

标签： javascript jquery jquery-mobile

【解决方案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>

【讨论】：

【解决方案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。

【讨论】：