<!DOCTYPE html>
<html>
<html lang="zh-CN">
<head>
<title>JqueryMobile--页面导航</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.0.1.css" />
<script src="jquery.js"></script>
<script src="jquery.mobile-1.0.1.js"></script>
</head>
<body>
<!--这是主页面-->
<section id="homepage" data-role="page">
<header data-role="header">
<h1>页面一</h1>
</header><!-- /header -->
<div data-role="content">
<p><a href="#gallery">链接到第二个页面</a></p>
<p>页面一</p>
</div><!-- /content -->
<footer data-role="footer" data-role="fixed" data-id="nav"><!--data-role="fixed"固定页脚-->
<div class="navmain" data-role="navbar">
<ul>
<li><a href="#homepage" class="ui-btn-active ui-state-persist">主页</a></li><!--class="ui-btn-active ui-state-persist"当前页面导航高亮显示-->
<li><a href="#gallery">画廊</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</div>
</footer>
</section><!-- /page -->
<!--这是画廊页面-->
<section id="gallery" data-role="page">
<header data-role="header">
<h1>页面二</h1>
</header><!-- /header -->
<div data-role="content">
<p><a href="#homepage">链接到第一个页面</a></p>
<p>页面二</p>
</div><!-- /content -->
<footer data-role="footer" data-role="fixed" data-id="nav">
<div class="navmain" data-role="navbar">
<ul>
<li><a href="#homepage">主页</a></li>
<li><a href="#gallery" class="ui-btn-active ui-state-persist">画廊</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</div>
</footer><!-- /footer -->
</section><!-- /page -->
<!--这是联系页面-->
<section id="contact" data-role="page">
<header data-role="header">
<h1>页面三</h1>
</header><!-- /header -->
<div data-role="content">
<p><a href="#homepage">链接到第一个页面</a></p>
<p>页面三</p>
</div><!-- /content -->
<footer data-role="footer" data-role="fixed" data-id="nav">
<div class="navmain" data-role="navbar">
<ul>
<li><a href="#homepage">主页</a></li>
<li><a href="#gallery">画廊</a></li>
<li><a href="#contact" class="ui-btn-active ui-state-persist">联系</a></li>
</ul>
</div>
</footer><!-- /footer -->
</section><!-- /page -->
</body>
</html>
