2.单一HTML包含多个页面
我们经常看到在网站中，通过tab选项卡切换页面的情况，那么，我们可以在一个HTML中包含多个页面吗？
答案是肯定的，我们可以通过添加多个带有data-role="page"属性的<div>标签，来实现该效果，通过给每个<div>设置id（id=”***”）属性，来通过链接(<a href=”#***”>)选择不同的页面显示。
示例如下：
代码如下：
<!DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<title>一个HTML中多个页面</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="firstPage">
<div data-role="header">
<h1>这是页面1标题</h1>
</div>
<div data-role="content">
<p><a href="#secondPage">跳转到页面2</a></p>
</div>
<div data-role="footer">
<h1>这里是页面1底部</h1>
</div>
</div>
<div data-role="page" id="secondPage">
<div data-role="header">
<h1>这是页面2标题</h1>
</div>
<div data-role="content">
<p><a href="#firstPage">跳转到页面1</a></p>
</div>
<div data-role="footer">
<h1>这里是页面2底部</h1>
</div>
</div>
</body>
</html>
注释：在一个HTML中包含大量页面元素会影响加载时间（比如文本、链接、图像和脚本等等），所以，我们通常是使用外部文件的链接跳转：如：<a href=”test.html”>跳转到测试页面</a> .
扫一扫
101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
