要在 HTML 页面中显示分页，可以使用以下步骤：
创建一个包含所有页面内容的 HTML 文件。
使用 CSS 样式和 JavaScript 脚本来实现分页。
将页面内容分成多个部分，每个部分都放在一个单独的 div 元素中。
使用 JavaScript 代码计算页面数量和每个页面应该显示哪些部分。
创建一个容纳页码的 div 元素，并在其中添加用于切换页面的链接。
使用 CSS 样式为页码和链接添加样式，使其更易于阅读和使用。
以下是一个基本的 HTML 分页实现的示例：
<!DOCTYPE html>
<html>
<head>
<title>分页实现</title>
<style>
/* 样式表 */
.page-link {
display: inline-block;
padding: 5px 10px;
background-color: #eee;
border: 1px solid #ccc;
text-decoration: none;
color: #333;
}
.page-link:hover {
background-color: #ccc;
}
.active-page {
background-color: #333;
color: #fff;
}
</style>
</head>
<body>
<!-- 分页内容 -->
<div id="page1" class="page">
<h1>第一页</h1>
<p>第一页的内容</p>
</div>
<div id="page2" class="page">
<h1>第二页</h1>
<p>第二页的内容</p>
</div>
<div id="page3" class="page">
<h1>第三页</h1>
<p>第三页的内容</p>
</div>
<!-- 分页链接 -->
<div id="pagination">
<a href="#page1" class="page-link active-page">1</a>
<a href="#page2" class="page-link">2</a>
<a href="#page3" class="page-link">3</a>
</div>
<!-- JavaScript 脚本 -->
<script>
var pages = document.querySelectorAll('.page');
var paginationLinks = document.querySelectorAll('.page-link');
function showPage(pageNum) {
// 隐藏所有页面
for (var i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
// 显示指定页面
document.querySelector('#page' + pageNum).style.display = 'block';
// 更新活动链接
for (var i = 0; i < paginationLinks.length; i++) {
paginationLinks[i].classList.remove('active-page');
}
document.querySelector('.page-link[href="#page' + pageNum + '"]').classList.add('active-page');
}
// 初始显示第一页
showPage(1);
// 绑定链接点击事件
for (var i = 0; i < paginationLinks.length; i++) {
paginationLinks[i].addEventListener('click', function(event) {
event.preventDefault();
var pageNum = this.getAttribute('href').slice(-1);
showPage(pageNum);
});
}
</script>
</body>
</html>在这个示例中，我们使用了 div 元素来创建三个页面，每个页面都有一个唯一的 ID 和一个类名为 “page”。我们还创建了一个包含分页链接的 div 元素，并使用 CSS 样式为链接添加样式。在 JavaScript 脚本中，我们使用 showPage() 函数来切换页面，并使用事件监听器来处理链接的点击事件。