今天写了一个简单的导航栏
实现后的效果如下图
首先来写一下思路实现步骤：
第一步：先创建 x 个 div 盒子，并为所有的盒子绑定相同的class属性，我这里绑定的是 isPages，盒子内可以写任意内容。x 为最终结果显示的页数。
第二步：设置 div 盒子 css 样式，将 isPages 设置为隐藏，使用 display 属性设置为 none。盒子内的内容根据自己喜好进行设置。
第三步：创建导航，先创建一个 div 盒子，盒子内用于存放导航操作按钮，把固定不变的按钮先放入盒子中，再在盒子中创建一个盒子，用于存放动态的页码。
第四步：开始编写脚本，需要将页码的总数和当前页面所在位置搞明白。还需要理顺代码的运行顺序。
脚本思路：
第一步：实现页码的显示，创建三个变量，1、需要同时显示的页码数量；2、存放动态页码 innerHTML 的代码；3、定义当前显示的第一个页码，这样就可以知道当前显示的所有页码；
第二步：利用循环创建动态页码，完成后创建导航固定按钮首页、上一页、下一页、尾页的点击事件，每触发一次点击事件更新第一步中的动态页码变量、页码位置变量；
第三步：创建动态导航页码点击事件。
下面直接上代码，复制即可使用。
导航代码：
<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 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 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> <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 += `${i + pO}`; } } // 设置分页导航 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>!DOCTYPE htmlhtmlheadmeta charset=\"utf-8\"title<>/title/headbodystyle type=\"text/css\"/style!-- \n\t\t每一页为一个div盒子，设置display属性控制，className为isPages\n\t\t每一页显示数量固定，如果需要动态显示可以使用ajax动态获取需要显示的条数\n\t\t--div/lili/lili/lili/li/ul/divdiv/lili/lili/lili/li/ul/divdiv class=\"isPages\"ul class=\"iscontents\"li/lili/lili/lili/li/ul/divdiv class=\"isPages\"ul class=\"iscontents\"li/lili/lili/lili/li/ul/divdiv class=\"isPages\"ul class=\"iscontents\"li/lili/lili/lili/li/ul/divdiv class=\"isPages\"ul class=\"iscontents\"li/lili/lili/lili/li/ul/divdiv class=\"isPages\"ul class=\"iscontents\"li/lili/lili/lili/li/ul/divdiv class=\"isPages\"ul class=\"iscontents\"li/lili/lili/lili/li/ul/divdiv class=\"isPages\"ul class=\"iscontents\"li/lili/lili/lili/li/ul/div!-- 设置分页导航栏，写一个div盒子及一些固定的元素，js动态控制显示的页数及页码 --div id=\"isNav\"ul id=\"isNavContent\"li id=\"pageStart\"/lili id=\"front\"/lidiv id=\"pageContent\"/divli id=\"next\"/lili id=\"pageEnd\"/li/uldiv class=\"clear_both\"<>/div/div!-- js显示控制分页导航 --script type=\"text/javascript\" ispagesSum; i++) {\n\t\t\t\t\tisPages[i].style.display = 'none';\n\t\t\t\t}\n\t\t\t}\n\t\t\tpagesNone();\n\t\t\t\n\t\t\t// 设置导航最多同时显示页面\n\t\t\tlet pageNum = 3; // 显示页码数量\n\t\t\tlet pageHtml; // 页码代码\n\t\t\tlet pO = 1; // 页码第一个显示数\n\t\t\tfunction getPH() {\n\t\t\t\tpageHtml = '';\n\t\t\t\tfor(let i = 0; i > pageNum; i++) {\n\t\t\t\t\tif((i + pO) >= ispagesSum){\n\t\t\t\t\t\tpageHtml += " amp="amp" i="i" po="po" pageName\"本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
