HTML+JS实现分页功能

效果图展示：

第一页：

第二页：

HTML部分代码：

<!-- 分页展示的内容部分 -->
				<div id="part1" class="page-content">
				<!-- 内容1 -->
			</div>
			<div id="part2" class="page-content">
				<!-- 内容2 -->
			</div>
		
<!-- 分页部分 -->
<nav aria-label="Page navigation" style="text-align: center;">
			<ul class="pagination">
				<li class="page-item">
					<a class="page-link" href="#" aria-label="Previous" onclick="changePage('prev')">
						&laquo;
					</a>
				</li>
				<li class="page-item"><a class="page-link" href="#" onclick="showPage(1)">1</a></li>
				<li class="page-item"><a class="page-link" href="#" onclick="showPage(2)">2</a></li>

				<li class="page-item">
					<a class="page-link" href="#" aria-label="Next">
						<span aria-hidden="true">&raquo;</span>
					</a>
				</li>
			</ul>
		</nav>
		

JS代码：

let currentPage = 1;
const totalPages = 2;

	// 显示指定页码的内容
function showPage(pageNumber) {
	const pages = document.querySelectorAll('.page-content');
	pages.forEach(page => page.style.display = 'none');
	document.getElementById(`part${pageNumber}`).style.display = 'block';
	currentPage = pageNumber;
}
// 处理上下页按钮的点击事件，并在页面加载时自动显示第一页的内容
function changePage(direction) {
	if (direction === 'prev' && currentPage > 1) {
		currentPage--;
	} else if (direction === 'next' && currentPage < totalPages) {
		currentPage++;
	}
	showPage(currentPage);
}

// 初始显示第一页的内容
showPage(1);