标签：
<!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 { margin: 0px !important; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, ‘Bitstream Vera Sans Mono‘, ‘Courier New‘, Courier, monospace !important; font-size: 1em !important; color: rgb(128, 128, 128) !important; background-image: none !important;">#F5F5F5; border: 1px solid #EBEBEB; color: #0072BC; font-weight: normal; margin-left: 10px; padding: 2px 7px; text-decoration: none; width: 22px;; } .current { margin: 0px !important; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, ‘Bitstream Vera Sans Mono‘, ‘Courier New‘, Courier, monospace !important; font-size: 1em !important; color: rgb(128, 128, 128) !important; background-image: none !important;">#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">这里是第二段内容</div><div class="page">第三段内容</div><div class="page">第四段内容</div><div id="pagnation"></div></div><script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.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>标签：
原文地址：http://www.cnblogs.com/qiandu/p/4378484.html
