Part 9—Create dedicated mobile website

43 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?)

<div data-role='page' id='root'>
  <div data-role='header'>
    <h1>Website Title</h1>
  </div>
  <div data-role='content'>
    <p>Here is a paragraph that contains <a href='#page-2'>a link to page 2</a>. And content goes on here.</p>
  </div>
</div>

Then we define a page 2 following the code above. Make sure the ID of the div matches the link in home page.

<div data-role='page' id='page-2'>
  <div data-role='header'>
    <h1>Page 2</h1>
  </div>
  <div data-role='content'>
    <p>Page 2 content goes here. And it may contain link that link back to the <a href='#root'>first page</a>.</p>
  </div>
</div>

License

Link between pages Copyright © by makzan. All Rights Reserved.

Share This Book

Notice: 2nd edition update is work-in-progress. See update logs for details.