jQuery Mobile的changePage突破標籤

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歷史記錄，而多個內部頁面使用 散列表示內部頁面，因此在這兩種模式之間將存在散列 中的衝突。

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），並將其適當鏈接或在用戶單擊導航欄選項卡時動態生成內容。