<! DOCTYPE html>
<title> three countries </title>
<meta name= "viewport" content= "width=device-width,initial-scale=1,user-scalable=0"/>
<script type= "Text/javascript" src= "http://code.jquery.com/jquery-1.5.min.js "></script>
<link rel= "stylesheet" href= "Http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css"/>
<script type= "Text/javascript" src= "http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js "></script>
<body>
<div data-role= "page" id= "homepage" data-position= "fixed" >
<div data-role= "Header" >
</div>
<div data-role= "Content" >
</div>
<div data-role= "Footer" data-position= "fixed" >
<nav data-role= "NavBar" >
<ul>
<li><a data-role= "button" data-icon= "Forward" data-theme= "a" href= "#page_liu" > Shu </a></li>
<li><a data-role= "button" data-icon= "Forward" data-theme= "a" href= "#page_wu" > Wu </a></li>
<li><a data-role= "button" data-icon= "Forward" data-theme= "a" href= "#page_cao" > Wei </a></li>
</ul>
</nav>
</div>
</div>
<div data-role= "page" id= "Page_liu" data-position= "fixed" >
<div data-role= "Header" >
<a data-role= "button" data-icon= "Back" data-theme= "a" href= "#homepage" > Return </a>
</div>
<div data-role= "Content" >
Liu Bei, Guan Yu, Zhang Fei
</div>
<div data-role= "Footer" data-position= "fixed" >
</div>
</div>
<div data-role= "page" id= "Page_wu" data-position= "fixed" >
<div data-role= "Header" >
<a data-role= "button" data-icon= "Back" data-theme= "a" href= "#homepage" > Return </a>
</div>
<div data-role= "Content" >
Sun Quan, Zhou Yu, Huang Gai
</div>
<div data-role= "Footer" data-position= "fixed" >
</div>
</div>
<div data-role= "page" id= "Page_cao" data-position= "fixed" >
<div data-role= "Header" >
<a data-role= "button" data-icon= "Back" data-theme= "a" href= "#homepage" > Return </a>
</div>
<div data-role= "Content" >
Caocao, Cao Ren, Cao Pi
</div>
<div data-role= "Footer" data-position= "fixed" >
</div>
</div>
</body>
Effect:
Jquerymobile Menu Cases