javascript - jQuery 移动 : data-rel ="back" does not work properly after page reload

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="back"按钮返回页面 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>