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

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给出的这种结构。 其次navbars应该是内部页脚或标题，所以包装页脚左右页脚，然后你需要固定页眉和页脚与相同的data-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