This tutorial will explain how to create and navigate through multiple web pages.

As explained in my earlier tutorial (JQuery Mobile – Hello World !) create 3 different pages.

<div data-role=”page” id=”pg1″>

        <div data-role=”header”>
            <h1>
                Page 1 </h1>
        </div>
        
        <div data-role=”content”>
            
            <p> This is your first page </p>
           
        </div>
        
 </div>

PAGE 2
    
    <div data-role=”page” id=”pg2″>
    
        <div data-role=”header”>
            <h1>
                Page 2 </h1>
        </div>
        
        <div data-role=”content”>
            <p> This is your second page </p>
        </div>
        
    </div>
    

PAGE 3


    <div data-role=”page” id=”pg3″>
    
        <div data-role=”header”>
            <h1>
                Page 3 </h1>
        </div>
        
        <div data-role=”content”>
            <p> This is your third page </p>
        </div>
        
    </div>
   

Now, add 2 buttons for each of these pages.

<div data-role=”button”> LINK </div>

Using href tag to link the pages as shown below,

For example in page 3 add,

<a href=”#pg1″ data-role=”button” >I wanna see page 1</a>
<a href=”#pg2″ data-role=”button” >I wanna see page 2</a>

Make sure the id’s are correctly mentioned in the href tag.

DEMO

Complete code is given below.

<!DOCTYPE html>
<html>

<head>
    <title>Navigate</title>
    
    <link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css” />
    <script src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>
    <script src=”http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js”></script>
</head>

<body>

    <div data-role=”page” id=”pg1″>

        <div data-role=”header”>
            <h1>
                Page 1 </h1>
        </div>
        
        <div data-role=”content”>
            
            <p> This is your first page </p>
            
            <a href=”#pg2″ data-role=”button” >I wanna see page 2 </a>
            <a href=”#pg3″ data-role=”button” >I wanna see page 3 </a>
            
        </div>
        
        
    </div>
    
    <div data-role=”page” id=”pg2″>
    
        <div data-role=”header”>
            <h1>
                Page 2 </h1>
        </div>
        
        <div data-role=”content”>
            <p> This is your second page </p>
                <a href=”#pg1″ data-role=”button” >I wanna see page 1</a>
                <a href=”#pg3″ data-role=”button” >I wanna see page 3</a>
        </div>
        
    </div>
    
    <div data-role=”page” id=”pg3″>
    
        <div data-role=”header”>
            <h1>
                Page 3 </h1>
        </div>
        
        <div data-role=”content”>
            <p> This is your third page </p>
                <a href=”#pg1″ data-role=”button” >I wanna see page 1</a>
                <a href=”#pg2″ data-role=”button” >I wanna see page 2</a>
                
       </div>
        
    </div>
    
</body>
</html>