一个简单的jQuery分页代码

2020-01-27 13:44:21

字体：大中小

来源：转载

供稿：网友

一个简单的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">这里是第二段内容</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>

上一篇：固定显示在网页左上角的LoGo图片

下一篇：网页上随滚动条滚动的层