如何在单个jQuery移动文档中包含多个页面

在这篇文章中，我们将学习如何在一个jQuery移动文档中包含多个页面。

方法：这可以通过创建多个div并将data-role属性设置为page来实现，现在每个div将代表一个页面，每个div需要有一个唯一的id来实现页面之间的正确链接。 jQuery Mobile的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>

步骤：首先，将jQuery CDN添加到脚本中，或将它们下载到你的本地机器上。我们将创建一个有2个页面的文档。在页面中创建两个div元素并设置data-role=”page “。保持第一个div的id为HomePage，第二个div的id为AboutUs。

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

然后，我们将在两个div中分别创建两个带有href属性的锚标签，分别为 href=”#HomePage” 和 href=”#AboutUs”。

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

然后，我们可以根据我们的需要在两个div中添加其他内容。

示例:

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

输出:

如何在单个jQuery移动文档中包含多个页面？