Question

我有一个包含两个页面的JQuery Mobile应用程序：page1和page2

在page1上，我通过以下代码将用户重定向到page2：

$.mobile.changePage("/home/page2/", { transition: "slide" });

Page2中有三个data-role="page"个元素。这些页面中的每一页在页脚中都有以下内容：

<div data-role="footer" data-position="fixed"> 
    <div data-role="navbar">
        <ul>
          <li><a href="#screen1">Screen 1</a></li>
          <li><a href="#screen2">Screen 2</a></li>
          <li><a href="#" class="ui-btn-active">Screen 3</a></li>
        </ul>
    </div>
</div>

如果我直接导航到/home/page2，标签就可以正常工作。但是，当我通过changePage()将用户重定向到page2时，标签不起作用。会导致这种情况的原因是什么？

Answer 1

来自jQuery Mobile documentation：

在多页文档中进行链接

重要的是要注意，如果您从移动页面链接   通过Ajax加载到包含多个内部页面的页面，   你需要在链接中添加rel =“external”或data-ajax =“false”。   这告诉框架进行整页重新加载以清除   URL中的Ajax哈希值。这很关键，因为Ajax页面使用哈希   （＃）跟踪Ajax历史记录，而多个内部页面使用   hash表示内部页面，因此哈希中会有冲突   这两种模式之间。

changePage()本身使用Ajax加载页面，这是导致问题的原因，因为只加载了#screen1。

如果您的应用用户界面和逻辑允许您使用链接从Page1重定向到Page2：

<a href="page2.html" rel="external" data-transition="slide">Go to Page 2</a>

如果必须以编程方式重定向，请考虑将多页Page2拆分为单独的JQM页面（例如page21.html，page22.html，page23.html）并相应地链接它们或在用户点击导航栏时动态生成内容标签。

页脚中的jquery mobile changePage break标签

1 个答案: