jquery-mobile - 如何在jquery mobile的标签栏中显示不同的页面

Question

我正在使用 jquery mobile 实现标签栏。我需要在标签栏上的不同按钮上显示不同的页面。但它显示在同一页面中。

http://jsfiddle.net/ravi1989/654gX/

<div data-role="navbar">
  <ul>
    <li><a href="#tab-1" onclick="ShowHide(this)">Tab1</a></li>
    <li><a href="#tab-2" onclick="ShowHide(this)">Tab2</a></li>
    <li><a href="#tab-3" onclick="ShowHide(this)">Tab3</a></li>
  </ul>
</div>

<div data-role="content" class="content">
   <div id="tab-1">
      <h2>Here is the first tab</h2>
   </div>
   <div id="tab-2">
      <h2>Here is the second tab</h2>
    </div>
    <div id="tab-3">
       <h2>Here is the third tab</h2>
    </div>
</div>

Answer 1

您需要重组您的应用程序，首先遵循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小提琴示例