一個簡單的jQuery分頁代碼

2024-09-05 12:18:06

字體：大中小

來源：轉載

供稿：網友

一個簡單的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   class="iwvjtn8m0"   id="content"><div   id="iwvjtn8m0"   class="page">這里是第一段內容</div><div   id="iwvjtn8m0"   class="page">這里是第二段內容</div><div   id="iwvjtn8m0"   class="page">第三段內容</div><div   id="iwvjtn8m0"   class="page">第四段內容</div><div   class="iwvjtn8m0"   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('Prev');		for(var i=0;i<$('.page').length;i++){			_Nav.append(''+(i+1)+'');		}		_Nav.append('Next');	}	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>
</div>
<div   id="iwvjtn8m0"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="iwvjtn8m0"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-05/1556818.html'>網頁上隨滾動條滾動的層</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-05/1556820.html'>固定顯示在網頁左上角的LoGo圖片</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="iwvjtn8m0"   class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

學習交流