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

时间:2013-07-02 16:03:01

标签: jquery-mobile

我正在使用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>

1 个答案:

答案 0 :(得分:0)

您需要重新构建应用,首先遵循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 fiddle example