今天写了一个简单的导航栏
实现后的效果如下图
首先来写一下思路实现步骤：
第一步：先创建 x 个 div 盒子，并为所有的盒子绑定相同的class属性，我这里绑定的是 isPages，盒子内可以写任意内容。x 为最终结果显示的页数。
第二步：设置 div 盒子 css 样式，将 isPages 设置为隐藏，使用 display 属性设置为 none。盒子内的内容根据自己喜好进行设置。
第三步：创建导航，先创建一个 div 盒子，盒子内用于存放导航操作按钮，把固定不变的按钮先放入盒子中，再在盒子中创建一个盒子，用于存放动态的页码。
第四步：开始编写脚本，需要将页码的总数和当前页面所在位置搞明白。还需要理顺代码的运行顺序。
脚本思路：
第一步：实现页码的显示，创建三个变量，1、需要同时显示的页码数量；2、存放动态页码 innerHTML 的代码；3、定义当前显示的第一个页码，这样就可以知道当前显示的所有页码；
第二步：利用循环创建动态页码，完成后创建导航固定按钮首页、上一页、下一页、尾页的点击事件，每触发一次点击事件更新第一步中的动态页码变量、页码位置变量；
第三步：创建动态导航页码点击事件。
下面直接上代码，复制即可使用。
导航代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
.isPages {
display: none;
}
#isNavContent {
margin: 0;
padding: 10px;
}
#isNavContent li {
list-style: none;
float: left;
display: block;
text-align: center;
width: 50px;
height: 35px;
line-height: 35px;
color: #333333;
border: 1px solid #DDDDDD;
background-color: #F2F2F2;
cursor: pointer;
}
#isNavContent li:hover {
background-color: #0AB0F6;
color: #FFFFFF;
}
#pageContent {
float: left;
}
#pageContent li:hover {
background-color: #0AB0F6 !important;
color: #FFFFFF !important;
}
.clear_both {
clear: both;
}
</style>
<!--
每一页为一个div盒子，设置display属性控制，className为isPages
每一页显示数量固定，如果需要动态显示可以使用ajax动态获取需要显示的条数
-->
<div class="isPages">
<ul class="iscontents">
<li>
1在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
</ul>
</div>
<div class="isPages">
<ul class="iscontents">
<li>
2在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
</ul>
</div>
<div class="isPages">
<ul class="iscontents">
<li>
3在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
</ul>
</div>
<div class="isPages">
<ul class="iscontents">
<li>
4在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
</ul>
</div>
<div class="isPages">
<ul class="iscontents">
<li>
5在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
</ul>
</div>
<div class="isPages">
<ul class="iscontents">
<li>
6在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
</ul>
</div>
<div class="isPages">
<ul class="iscontents">
<li>
7在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
</ul>
</div>
<div class="isPages">
<ul class="iscontents">
<li>
8在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
</ul>
</div>
<div class="isPages">
<ul class="iscontents">
<li>
9在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
<li>
在新的阅读视图中阅读更加容易
</li>
</ul>
</div>
<!-- 设置分页导航栏，写一个div盒子及一些固定的元素，js动态控制显示的页数及页码 -->
<div id="isNav">
<ul id="isNavContent">
<li id="pageStart">首页</li>
<li id="front">上一页</li>
<div id="pageContent">
</div>
<li id="next">下一页</li>
<li id="pageEnd">尾页</li>
</ul>
<div class="clear_both"></div>
</div>
<!-- js显示控制分页导航 -->
<script type="text/javascript">
let isPages = document.getElementsByClassName('isPages');
let ispagesSum = isPages.length; // 获取总页数
let pageContent = document.getElementById('pageContent'); // 获取储存页码代码盒子
// 隐藏全部
function pagesNone() {
for(let i = 0; i < ispagesSum; i++) {
isPages[i].style.display = 'none';
}
}
pagesNone();
// 设置导航最多同时显示页面
let pageNum = 3; // 显示页码数量
let pageHtml; // 页码代码
let pO = 1; // 页码第一个显示数
function getPH() {
pageHtml = '';
for(let i = 0; i < pageNum; i++) {
if((i + pO) <= ispagesSum){
pageHtml += `<li id="${'page' + (i + pO)}" class="pageName">${i + pO}</li>`;
}
}
// 设置分页导航
pageContent.innerHTML = pageHtml;
// 添加导航事件
let pageName = document.getElementsByClassName('pageName');
for(let i = 0; i < pageNum; i++) {
if((i + pO) <= ispagesSum){
pageName[i].addEventListener('click', function() {
pagesNone();
isPages[i + (pO - 1)].style.display = 'block';
let pageId = 'page' + (i + pO);
let pageStyle = document.getElementById(pageId);
// 隐藏全部选中样式
for(let j = 0; j < pageNum; j++) {
if((j + pO) <= ispagesSum){
let _pageId = 'page' + (j + pO);
let _pageStyle = document.getElementById(_pageId);
_pageStyle.style.backgroundColor = '#f2f2f2';
_pageStyle.style.color = '#333333';
}
}
pageStyle.style.backgroundColor = '#0AB0F6';
pageStyle.style.color = '#FFFFFF';
})
}
}
}
getPH();
// 设置默认显示第一页
isPages[0].style.display = 'block';
// 设置默认样式
document.getElementById('page1').style.backgroundColor = '#0AB0F6';
document.getElementById('page1').style.color = '#FFFFFF';
// 获取导航操作ID
let pageStart = document.getElementById('pageStart');
let pageEnd = document.getElementById('pageEnd');
let front = document.getElementById('front');
let next = document.getElementById('next');
// 导航操作
pageStart.addEventListener('click', function() {
pO = 1;
getPH();
})
pageEnd.addEventListener('click', function() {
pO = ispagesSum - 1;
getPH();
})
front.addEventListener('click', function() {
if(pO < 3) {
pO = 1;
}else{
pO -= 2;
}
getPH();
})
next.addEventListener('click', function() {
if(pO > (ispagesSum - 3)) {
pO = ispagesSum - 1;
}else{
pO += 2;
}
getPH();
})
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
