jquery 移动底部图标导航栏如何只重新加载页面内容

Question

我有一个应用程序，我在带有图标的页脚中使用导航栏。但是当我导航到其他页面时，内容会闪烁或淡入。 jquery-mobile 是否可以只刷新页面内容而不闪烁？

这是重现问题的 FIDDLE。

所以我有一个像这样的页脚：

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
      <div data-role="navbar">
      <ul>
        <li><a href="#p1" data-icon="home">Home</a></li>
        <li><a href="#p2" data-icon="arrow-r">Page Two</a></li>
        <li><a href="#p3" data-icon="search">Search</a></li>
      </ul>
    </div>

这将导航到这些页面，例如：

<div data-role="page" id="p2">
    <div  data-role="header" data-rel="back"><h1>Header Page 2</h1></div>    
    <div  data-role="content">
        <p>This is page2</p>
    </div>

     <div data-role="footer" data-position="fixed" data-tap-toggle="false">
      <div data-role="navbar">
      <ul>
        <li><a href="#p1" data-icon="home">Home</a></li>
        <li><a href="#p2" data-icon="arrow-r">Page Two</a></li>
        <li><a href="#p3" data-icon="search">Search</a></li>
      </ul>
    </div>
    </div>
</div>

我已经找到了类似的东西，但不知道这是否相关或有用：LINK

Answer 1

使用 data-transition="none" 作为您希望在锚标记内避免转换的链接。您更新后的 Fiddle：http://jsfiddle.net/zhr27bud/7/

jquery 移动底部图标导航栏如何只重新加载页面内容

jquery mobile bottom icon navbar how to only reload page content

html

javascript

css

jquery

jquery-mobile