<!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(){
$('.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>
