本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.2节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
可以在单个HTML文件中添加多张页面。这样的话，就不需要发送新的请求到服务器，所以接口就更具响应性了。除此之外，离线时仍旧可以导航页面。代码清单9-2演示了如何链接至第二张页面。
对于页面数量有限的情况，这会工作得很不错。然而，有时内存消耗会成为问题（取决于目标设备的规格）。稍后会讨论链接至外部页面。
代码清单9-2 导航到第二张页面
00 <!DOCTYPE html> 01 <html> 02 <head> 03 <title>Pages</title> 04 <meta name="viewport" 05 content="width=device-width, initial-scale=1"> 06 <link rel="stylesheet" href= 07 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"> 08 <script type="text/javascript" 09 src="http://code.jquery.com/jquery-1.7.1.min.js"> 10 </script> 11 <script type="text/javascript" src= 12 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> 13 </script> 14 </head> 15 <body> 16 17 <div data-role="page"> 18 19 <div data-role="header"> 20 <h1>First</h1> 21 </div> 22 23 <div data-role="content"> 24 <p>Hello world <a href="#second">and go to the second</a></p> 25 </div> 26 27 <!-- 28 Either/or... the result is in the LINK, not the DIV 29 30 <div data-role="content"> 31 <p>Or... <a href="#second" data-rel="dialog" 32 data-transition="pop">show the exact same page as a 33 dialog!</a></p> 34 </div> 35 --> 36 </div> 37 38 <div data-role="page" id="second"> 39 40 <div data-role="header"> 41 <h1>Second</h1> 42 </div> 43 <div data-role="content"> 44 Hello, again! 45 </div> 46 47 </div> 48 49 </body> 50 </html>让我们从HTML的底部开始说起。第38～45行的div是第二张页面。它有自己的header和content。更为重要的是，div元素有一个id属性。
第23～25行是第一张页面的主体内容，里面有一个链接指向了第二张页面。在id属性前面放一个#把它变为一个哈希标记（hash-tag），这样就可以作为锚点被引用了。点击链接时，请注意观察移动浏览器的URL地址栏。你可以使用这个新的URL来建立该页面的书签（bookmark），当你点击该书签时就能直接打开第二张页面了。
最后，第27～35行是第23～25行的一种替代方案。它当前被注释标记禁用了。如果你用该内容替换第23～25行的内容，第二张页面会以对话框而不是新页面的方式打开。和你所看见的一样，是以普通页面还是以对话框的方式来打开页面是由链接指定的。
推荐你不要混合使用多种打开页面的方式。要么以页面的方式打开，要么以对话框的方式打开。在单个HTML文件中切换打开方式会导致意想不到的行为。
相关资源：敏捷开发V1.0.pptx