Multiple-pages-in-one Method of Mobile Web Design

I mention this here as it is relevant to the previous post that describes mimicking pop up windows with CSS. One can create mobile pages by the same method to load one HTML file that contains multiple DIVs one for each page. jQuery mobile makes this possible. Here is a sample.
<div data-role='page'>
<header data-role="header"><h1>Main Page</h1></header>
<section data-role='content'>
<h3>Main Page</h3>
<a href="#secondPage">
Some text for link
</a>
</section>
<footer data-role='footer'><h4>© 2013</h4></footer>
</div>
<div data-role='page' id='secondPage'>
<header data-role="header"><h1>Second Page</h1></header>
<section data-role='content'>
Content for second page
</section>
<footer data-role='footer'><h4>© 2013</h4></footer>
</div>