HTML实现分页功能
·
思路
主要是通过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>/ 共<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
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
31
0- 0
已为社区贡献2条内容
所有评论(0)