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