一个简单的jQuery分页代码

发布时间：2018-09-05 22:36:32 所属栏目：Unix 来源：站长网

导读：一个简单的 jQuery 分页代码，将网页指定的文字段落分成若干个小段，实现分段功能，其实也就是分页，这是个简单的演示，希望通过实例演示让朋友们理解使用jQuery分页的方法。为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特

一个简单的jQuery分页代码，将网页指定的文字段落分成若干个小段，实现分段功能，其实也就是分页，这是个简单的演示，希望通过实例演示让朋友们理解使用jQuery分页的方法。

为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示

网页演示：猛击此处

运行演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>jQuery分页</title> <style type="text/css" rel="stylesheet"> .page{ display:none; } #pagnation a{ padding-right:5px; } .current { color:blue; } #pagnation{ margin-top:20px; } .numlink,#prev,#next { background-color: #F5F5F5; border: 1px solid #EBEBEB; color: #0072BC; font-weight: normal; margin-left: 10px; padding: 2px 7px; text-decoration: none; width: 22px;; } .current { background-color: #DDEEFF; border: 1px solid #BBDDFF; color: #0072BC; cursor: default; margin-left: 10px; padding: 2px 7px; text-decoration: none; } </style> </head> <body> <div id="content"> <div class="page"> 这里是第一段内容,记住哦，一会就要翻页了。 </div> <div class="page"> 这里是第二段内容，烈火liehuo学院.net，再按翻页试试！？ </div> <div class="page"> 第三段内容，再翻，就到尾页了。</div> <div class="page"> 第四段内容，哈哈，再见，欢迎再来烈火liehuo网.net。 </div> <div id="pagnation"> </div> </div> <script type="text/javascript" src="/uploads/common/js/jquery-1.3.2.js"></script> <script type="text/javascript"> var _Pages = $('.page'); var _Nav = $('#pagnation'); function createLinks(){ _Nav.append('<a href="#" id="prev">Prev</a>'); for(var i=0;i<$('.page').length;i++){ _Nav.append('<a href="#" class="numlink">'+(i+1)+'</a>'); } _Nav.append('<a href="#" id="next">Next</a>'); } function process(now,_Prev,_Next){ $('.page:eq('+now+')').css('display','block'); $('.numlink:eq('+now+')').addClass('current'); var total = parseInt($('.page').length - 1); if(now == 0){ _Prev.hide(); _Next.show(); } else if(now == total){ _Prev.show(); _Next.hide(); } else { _Prev.show(); _Next.show(); } } function hideAll(){ _Pages.css('display','none'); $('.numlink').removeClass('current'); } $(document).ready(function(){ //set the first one display none $('.page:eq(0)').css('display','block'); createLinks(); $('.numlink:eq(0)').addClass('current'); var _Next = $('#next'); var _Prev = $('#prev'); var _Link = $('.numlink'); _Prev.hide(); var now = parseInt($('.numlink').index($('.current'))); _Next.click(function(){ hideAll(); process(now+1,_Prev,_Next); now = parseInt($('.numlink').index($('.current'))); }); _Prev.click(function(){ hideAll(); process(now-1,_Prev,_Next); now = parseInt($('.numlink').index($('.current'))); }) _Link.click(function(){ var that = $(this); hideAll(); var which = that.index() - 1; process(which,_Prev,_Next); now = parseInt($('.numlink').index($('.current'))); }) }) </script> </body> </html> </iframe></noscript></object></layer></span></div></table> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：阜阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!