HTML实现分页功能

最新推荐文章于 2024-04-18 11:41:43 发布

XAL1

最新推荐文章于 2024-04-18 11:41:43 发布

阅读量2.9w

点赞数 30

文章标签： html javascript css

本文链接：https://blog.csdn.net/weixin_45607635/article/details/121769716

版权

思路

主要是通过display: block和display: none来实现页面的切换。

将每个页面用一个div包起来，默认第一个页面的样式是display: block，其他页面的样式是display: none，然后通过JavaScript获取鼠标点击事件来隐藏其他页面，显示当前页面，达到页面切换的目的。

效果

在这里插入图片描述

具体实现

创建项目

首先创建一个项目，我的项目的目录结构大致如下图所示。

.html文件

篇幅问题，这里就只详细放page部分的第一个页面的两个条目的代码作为例子了。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>实现分页</title>
	<link rel="stylesheet" type="text/css" href="./css/index.css"/>
</head>
<body>
	<!-- 内容块 -->
	<div class="page-block">
		<div class="page-1">
			<h1>第一页</h1>
			<div class="article-hover">
				<div class="thumbnail">
					<img src="./imgs/thumbnail/1.jpeg" alt="">
				</div>
				
				<div class="info-content" onmouseover="light(this)" onmouseout="normal(this)">
					<div class="li-title">
						第一条新闻
					</div>
					<div class="li-content">
						content 
					</div>
					<a href="news1.html">查看详情</a>
				</div>
			</div>
			<hr/>
			<div class="article-hover">
				<div class="thumbnail">
					<img src="./imgs/thumbnail/2.jpg" alt="">
				</div>
				
				<div class="info-content" onmouseover="light(this)" onmouseout="normal(this)">
					<div class="li-title">
						第二条新闻
					</div>
					<div class="li-content">
						content
					</div>
					<a href="news2.html">查看详情</a>
				</div>
			</div>
			<hr/>
		</div>

		<div class="page-2">
			<h1>第二页</h1>
			... ...
		</div>
		
		<div class="page-3">
			<h1>第三页</h1>
			... ...
		</div>
	</div>
	<!-- 分页按钮 -->
	<div class="page-icon">
		<button class="firstPage" onclick="first_click()" ><img src="./imgs/page-icon/left-end.png"/></button>
		<button class="beforePage" onclick="prev_click()" ><img src="./imgs/page-icon/page-left.png"/></button>
		<button>第<input id="currentPage" onchange="choose_page()" type="text" value="1"/>页</button>
		<button>/&nbsp;&nbsp;&nbsp;共<input id="totalPage" type="button" value="3" readonly="readonly">页</button>
		<button class="nextPage" onclick="next_click()"><img src="./imgs/page-icon/page-right.png"/></button>
		<button class="lastPage" onclick="last_click()"><img src="./imgs/page-icon/right-end.png"/></button>			
	</div>
	<script src="./js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

.css文件

body {
	background: #efefef;
}
.page-block {
	width: 1100px;
	background: #efefef;
	margin: auto auto;
}
.page-block h1 {
	text-align: center;
}
.article-hover{
	height: 150px;
	background: #ffffff;
}
.article-hover:hover{
	background: #f8f8f8;
}
.thumbnail {
	width: 250px;
	height: 150px;
	display: flex;
	align-items: center;
	float: left;
}
.thumbnail img {
	width: 200px;
	height: 130px;
	margin: 0 auto;
}
.info-content {
	width: 850px;
	height: 150px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.info-content a {
	color: #000000;
	text-decoration: none;
	display: inline-block;
	border: 1px solid #cdcdcd;
	padding:4px 10px 5px;
	border-radius: 10px;
}
.info-content a:hover {
	background: linear-gradient(to right,#FFCC00,#FF9900);
	color: #fff;
} 
.li-title{
	width: 850px;
	font-size: 24px;
	font-weight: 700;
	text-align: left;
}
.li-content{
	width: 830px;
	font-size: 16px;
	font-weight: 400;
	text-align: left;
}
.page-icon{
	width: 1200px;
	margin: 35px auto 0;
	font-size:0;
	text-align:center;
}
.page-icon button {
	border: none;
	background-color: #efefef;
	padding:4px 10px 5px;
	font-size:20px;
}
.page-icon button:nth-child(3), .page-icon button:nth-child(4) {
	cursor: default;
}
.page-icon button img {
	width: 15px;
	height: 15px;
}
#totalPage, #currentPage {
	cursor: default;
	border: none;
	background-color: #efefef;
	padding:4px 10px 5px;
	font-size:20PX;
}
#currentPage {
	cursor: auto;
	text-align: center;
	width: 40px;
}
.page-1{
	display: block;
}
.page-2, .page-3{
	display: none;
}
hr {
	opacity: 50%;
}

.js文件

// 定义一个数组，保存当前所有页面的class name
var page_index = ["page-1", "page-2", "page-3"];

// 输入pagename，打开指定的div，隐藏其他的div
function page_option(pagename){
	var tar_index = page_index.indexOf(pagename);
	page_index.slice(tar_index, 1);
	for (var j = 0; j < page_index.length ; j++){
		var close_div = document.getElementsByClassName(page_index[j]);
		for (var i = 0; i<close_div.length;i++) {
			   close_div[i].style.display="none";
		};
	}
	
	var opendiv = document.getElementsByClassName(pagename);
	for (var i = 0; i<opendiv.length;i++) {
		   opendiv[i].style.display="block";
	};
}

// 点击 返回第一页按钮 执行的操作
function first_click(){
	page_option("page-1");
	document.getElementById('currentPage').value=1;
}

// 点击 跳到最后一页按钮 执行的操作
function last_click(){
	var total_page = document.getElementById('totalPage').value;
	page_option(page_index[page_index.length - 1]);
	document.getElementById('currentPage').value=total_page;
}

// 点击 上一页按钮 执行的操作
function prev_click(){
	var cur_page = document.getElementById('currentPage').value;
	if (cur_page > 1){
		document.getElementById('currentPage').value=parseInt(cur_page)-1;
		var pagename = page_index[parseInt(cur_page)-2];
		page_option(pagename);
	}
}

// 点击 下一页按钮 执行的操作
function next_click(){
	var cur_page = document.getElementById('currentPage').value;
	var total_page = document.getElementById('totalPage').value;
	if (cur_page < total_page){
		document.getElementById('currentPage').value=parseInt(cur_page) + 1;
		var pagename = page_index[parseInt(cur_page)];
		page_option(pagename);
	}
}

// 手动改变当前页码时执行的操作
function choose_page(){
	var cur_page = document.getElementById('currentPage').value;
	var pagename = page_index[parseInt(cur_page)-1];
	page_option(pagename);
}

// 鼠标事件，经过每一条资讯时改变标题的颜色
function light(obj){
	obj.firstElementChild.style.color="#FF9900";
}

function normal(obj){
	obj.firstElementChild.style.color="#000000";
}

完整代码链接

我的代码放在github上，需要自取：https://github.com/Olin-YiYi/HTML-paging

XAL1

关注

30
点赞
踩
206

收藏

觉得还不错? 一键收藏
6
评论
HTML实现分页功能

思路主要是通过display: block和display: none来实现页面的切换。将每个页面用一个div包起来，默认第一个页面的样式是display: block，其他页面的样式是display: none，然后通过JavaScript获取鼠标点击事件来隐藏其他页面，显示当前页面，达到页面切换的目的。效果具体实现创建项目首先创建一个项目，我的项目的目录结构大致如下图所示。.html文件篇幅问题，这里就只详细放page部分的第一个页面的两个条目的代码作为例子了。<!DOCTY
复制链接

扫一扫