Edit in JSFiddle 


              
<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title>  
    <!-- viewport meta tag -->
    <!-- width=device-width 表示：硬體螢幕的像素寬度決定網頁呈現的寬度 -->
    <!-- initial-scale=1 表示：網頁載入時的放大比例，在此設定放大比例為一倍 -->         
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head> 
<body> 

<!-- 第一個網頁 -->
<div data-role="page" id="FirstPage">

    <!-- data-role="header" 網頁標頭 -->
    <div data-role="header">
        <h1>This is First Page</h1>
    </div>
    
    <!-- data-role="content" 網頁內容 -->
    <div data-role="content">   
        <!-- 呼叫 ID 為 SecondPage 的網頁 -->
        <p>View internal page called <a href="#SecondPage">Page 2</a></p>    
    </div>
    
    <!-- data-role="footer" 網頁頁尾 -->
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
    
</div>


<!-- 第二個網頁 -->
<div data-role="page" id="SecondPage">
    
    <!-- data-role="header" 網頁標頭 -->
    <div data-role="header">
        <h1>This is Second Page</h1>
    </div>
    
    <!-- data-role="content" 網頁內容 -->
    <div data-role="content"> 
        <!-- 呼叫 ID 為 FirstPage的網頁 -->        
        <p><a href="#FirstPage">Back to Page 1</a></p>    
    </div>
    
    <!-- data-role="footer" 網頁頁尾 -->
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
    
</div>
    
</body>
</html>

              

              

              

              

                
External resources loaded into this fiddle: