Link between pages
We would move on to create more than one page of content. First, we modify the home page to become the following code, which adds a link to #page-2
. (Remember the ID in hrefs?)
1<div data-role='page' id='root'>
2 <div data-role='header'>
3 <h1>Website Title</h1>
4 </div>
5 <div data-role='content'>
6 <p>Here is a paragraph that contains <a href='#page-2'>a link to page 2</a>. And content goes on here.</p>
7 </div>
8</div>
Then we define a page 2 following the code above. Make sure the ID of the div matches the link in home page.
1<div data-role='page' id='page-2'>
2 <div data-role='header'>
3 <h1>Page 2</h1>
4 </div>
5 <div data-role='content'>
6 <p>Page 2 content goes here. And it may contain link that link back to the <a href='#root'>first page</a>.</p>
7 </div>
8</div>
What’s next? We’re going to take a look at “Page transition”.