本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.2节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看

9.2　技巧：用单个HTML文件服务多张页面

可以在单个HTML文件中添加多张页面。这样的话，就不需要发送新的请求到服务器，所以接口就更具响应性了。除此之外，离线时仍旧可以导航页面。代码清单9-2演示了如何链接至第二张页面。

对于页面数量有限的情况，这会工作得很不错。然而，有时内存消耗会成为问题（取决于目标设备的规格）。稍后会讨论链接至外部页面。

代码清单9-2　导航到第二张页面

00  01  02  03　　 04　　
     06　　
    08　　11　　14  15  16 17 
    
     18 19　 
     
      20　　 
      
First
21　 
     
22 23　 
     
      　24　　 
      
Hello world and go to the second
　　25　 
     
26　 27　 
     36 
    
37 38 
    
     39 40　 
     
      41　　 
      
Second
42　 
     
43　
     
      44　　 Hello, again!45　
     
46 47 
    
48 49 50 

让我们从HTML的底部开始说起。第38～45行的div是第二张页面。它有自己的header和content。更为重要的是，div元素有一个id属性。

第23～25行是第一张页面的主体内容，里面有一个链接指向了第二张页面。在id属性前面放一个#把它变为一个哈希标记（hash-tag），这样就可以作为锚点被引用了。点击链接时，请注意观察移动浏览器的URL地址栏。你可以使用这个新的URL来建立该页面的书签（bookmark），当你点击该书签时就能直接打开第二张页面了。

最后，第27～35行是第23～25行的一种替代方案。它当前被注释标记禁用了。如果你用该内容替换第23～25行的内容，第二张页面会以对话框而不是新页面的方式打开。和你所看见的一样，是以普通页面还是以对话框的方式来打开页面是由链接指定的。

推荐你不要混合使用多种打开页面的方式。要么以页面的方式打开，要么以对话框的方式打开。在单个HTML文件中切换打开方式会导致意想不到的行为。