您需要重组您的应用程序,首先遵循jquery mobile docs中给出的结构。其次,导航栏应该在页脚或页眉内,因此将导航栏包裹在页脚周围,然后您需要具有相同数据 ID 的固定页眉和页脚,以便页面在动态保持相同页眉和页脚之间转换,这看起来像标签,例如
<div data-role="page" id="one">
<div data-role="header" data-position="fixed" data-id="sameheader">
<h1>Single page</h1>
</div><!-- /header -->
<div data-role="content">
<p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="samefooter">
<div data-role="navbar">
<ul>
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page -->.
<div data-role="page" id="two">
<div data-role="header" data-position="fixed" data-id="sameheader">
<h1>Single page</h1>
</div><!-- /header -->
<div data-role="content">
<p>Different page same footer.</p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="samefooter">
<div data-role="navbar">
<ul>
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page2 -->
Js小提琴示例