思路

主要是通过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";
}