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”.

◀ One page application Page transition ▶

makzan.

Link between pages

Makzan | Mobile web design | Table of Content