《jQuery、jQuery UI及jQuery Mobile技巧與示例》——9.2 技巧：用單個HTML檔案服務多張頁面

本節書摘來自異步社群《jquery、jquery ui及jquery mobile技巧與示例》一書中的第9章，第9.2節，作者：【荷】adriaan de jonge , 【美】phil dutson著，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視

可以在單個html檔案中添加多張頁面。這樣的話，就不需要發送新的請求到伺服器，是以接口就更具響應性了。除此之外，離線時仍舊可以導航頁面。代碼清單9-2示範了如何連結至第二張頁面。

對于頁面數量有限的情況，這會工作得很不錯。然而，有時記憶體消耗會成為問題（取決于目标裝置的規格）。稍後會讨論連結至外部頁面。

代碼清單9-2　導航到第二張頁面

讓我們從html的底部開始說起。第38～45行的div是第二張頁面。它有自己的header和content。更為重要的是，div元素有一個id屬性。

第23～25行是第一張頁面的主體内容，裡面有一個連結指向了第二張頁面。在id屬性前面放一個#把它變為一個哈希标記（hash-tag），這樣就可以作為錨點被引用了。點選連結時，請注意觀察移動浏覽器的url位址欄。你可以使用這個新的url來建立該頁面的書簽（bookmark），當你點選該書簽時就能直接打開第二張頁面了。

最後，第27～35行是第23～25行的一種替代方案。它目前被注釋标記禁用了。如果你用該内容替換第23～25行的内容，第二張頁面會以對話框而不是新頁面的方式打開。和你所看見的一樣，是以普通頁面還是以對話框的方式來打開頁面是由連結指定的。

推薦你不要混合使用多種打開頁面的方式。要麼以頁面的方式打開，要麼以對話框的方式打開。在單個html檔案中切換打開方式會導緻意想不到的行為。