JQuery分页
对于我们初学者，分页最终要的就是逻辑上的思考，下面就是我对分页的简单的理解，希望能帮到你们。也可以去查看我的上一篇简洁版的更有助于你的理解。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分页</title> <style type="text/css"> #content .page{ display: none; } #content #pagnation{ margin-top: 20px; } #pagnation a{ padding-right: 5px; } .numlink, #prev, #next{ background: #f5f5f5; border: 1px solid #D57506; margin-left: 10px ; padding: 2px 7px ; text-decoration: none; width: 22px; color: #0072bc; } .color{ background: #ddeeff; border: 1px solid #bbddff; color: #F4A460; } </style> </head> <body> <div id="content"> <div class="page"> 这里是第一段内容 </div> <div class="page"> 这里是第二段内容 </div> <div class="page"> 第三段内容</div> <div class="page"> 第四段内容 </div> <div id="pagnation"> </div> </div> </body> <script src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> //首先获取页面的内容和分页按钮的div var _Pages = $(".pages"); var _Nav = $("#pagnation"); //创建函数添加分页 function creatLinks() { _Nav.append('<a href="javascript:void(0)" id="prev">上一页</a>'); for(var i=0;i<$(".page").length;i++){ _Nav.append('<a href="javascript:void(0)" class="numlink">'+(i+1)+'</a>'); } _Nav.append('<a href="javascript:void(0)" id="next">下一页</a>'); }; //创建函数添加点击事件 function process(now,_Prev,_Next) { //首先先把隐藏的page页面1显示出来，同时给分页页码1添加样式 $('.page:eq('+now+')').css('display','block'); $('.numlink:eq('+now+')').addClass("color"); var totle = $(".page").length-1; if (now==0){//如果now等于0则让上一页隐藏，下一页显示 _Prev.hide(); _Next.show(); } else if(now == totle){//如果now等于页码的总数，则让下一页隐藏，上一页出现 _Prev.show(); _Next.hide(); } else{ _Prev.show(); _Next.show(); } }; //创建函数清除所有的样式 function clearAll() { $(".page").css("display","none"); $(".numlink").removeClass("color"); }; //执行函数 $(document).ready(function () { //先把页码1的内容显示出来 $(".page:eq(0)").css('display','block'); //添加分页 creatLinks(); //给分页1添加样式 $(".numlink:eq(0)").addClass("color"); //定义_Prev, _Next var _Prev = $("#prev"); var _Next = $("#next"); var _link = $(".numlink"); //添加点击事件前隐藏上一页 _Prev.hide(); //添加点击事件 //定义now为分页下标为color的 var now = parseInt($(".numlink").index($(".color"))); _Prev.click(function () { clearAll(); process(now-1,_Prev,_Next); now = parseInt($(".numlink").index($(".color"))); }); _Next.click(function () { clearAll(); process(now+1,_Prev,_Next); now = parseInt($(".numlink").index($(".color"))); }); //点击分页 _link.click(function () { clearAll(); var which = $(this).index()-1; process(which,_Prev,_Next); now = parseInt($(".numlink").index($(".color"))); }); }); </script> </html>
