How to include multiple pages in the single jQuery mobile document ?

Last Updated : 03 Mar, 2022

In this article, we will learn how to include multiple pages in a single jQuery mobile document.

Approach: This can be achieved by creating multiple div’s and setting the data-role attribute to page, Now each div will represent one page, and each div needs to have a unique id for proper linking between the pages. The jQuery Mobile page structure is optimized to support either single pages or local internal linked “pages” within a single page.

CDN Links:

<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”>
<script src=”https://code.jquery.com/jquery-1.11.3.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Steps: First, add the jQuery CDN to the script or download them to your local machine. We will create a document with 2 pages in it. Create two div elements in the page and set the data-role=”page”. Keep the id of the first div as HomePage and the id of the second div as AboutUs.

<div data-role="page" id="homePage">

We will then create two anchor tags with the href property as href=”#HomePage” and href=”#AboutUs” respectively in both divs.

<a href="#homePage">Home Page</a>
<a href="#AboutUs">About Us</a>

We can then add other content in both the divs according to our needs.

Example:

HTML

<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
    <script src= 
"https://code.jquery.com/jquery-1.11.3.min.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> 
    </script> 
</head> 
  
<style> 
    a { 
        display: inline-block; 
    } 
  
    a, 
    h1 { 
        text-align: center; 
        margin: 10px; 
    } 
</style> 
  
<body> 
    <div data-role="page" 
         id="homePage"> 
        <a href="#homePage">Home Page</a> 
        <a href="#AboutUs">About Us</a> 
        <h1>Hello geeks this is the home page</h1> 
    </div> 
    <div data-role="page" 
         id="AboutUs"> 
        <a href="#homePage">Home Page</a> 
        <a href="#AboutUs">About Us</a> 
        <h1>Hello again, this is About Us page</h1> 
    </div> 
</body> 
  
</html>