How to show Different pages on different click in tab bar in jquery mobile - jquery-mobile

Question

i am implementing tab bar using jquery mobile.I need to show different pages on different buttons on tab bar .But it is showing in same page.
http://jsfiddle.net/ravi1989/654gX/
<div data-role="navbar">
<ul>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</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

You need to restructure you app, first follow this structure given at jquery mobile docs.
Secondly navbars are supposed to be inside footer or header, so wrap you navbar around footer then you need fixed header and footer with same data-id so the pages transition between dynamically keeping the same header and footer, which looks like tabs, example
<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>One</li>
<li>Two</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>One</li>
<li>Two</li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page2 -->
Js fiddle example