简单的JQuery分页代码

**1. [代码][JavaScript]代码**

001
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

002
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

003
 <head>

004
<title>jQuery分页</title>

005
<style type="text/css" rel="stylesheet">

006
.page{

007
    display:none;

008
}

009
    #pagnation a{

010
        padding-right:5px;

011
    }

012
    .current {

013
        color:blue;

014
    }

015
    #pagnation{

016
        margin-top:20px;

017
        }

018
    .numlink,#prev,#next

019
    {

020
    background-color: #F5F5F5;

021
    border: 1px solid #EBEBEB;

022
    color: #0072BC;

023
    font-weight: normal;

024
    margin-left: 10px;

025
    padding: 2px 7px;

026
    text-decoration: none;

027
    width: 22px;;

028
    }

029
    .current

030
    {

031
     background-color: #DDEEFF;

032
    border: 1px solid #BBDDFF;

033
    color: #0072BC;

034
    cursor: default;

035
    margin-left: 10px;

036
    padding: 2px 7px;

037
    text-decoration: none; 

038
    }

039
    </style>

040
</head>

041
  
042
<body>

043
<div id="content">

044
<div class="page">

045
这里是第一段内容

046
</div>

047
<div class="page">

048
这里是第二段内容

049
</div>

050
<div class="page">

051
第三段内容</div>

052
<div class="page">

053
第四段内容

054
</div>

055
<div id="pagnation">

056
</div>

057
</div>

058
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>

059
<script type="text/javascript">

060
    var _Pages = $('.page');

061
    var _Nav = $('#pagnation');

062
    function createLinks(){

063
        _Nav.append('<a href="#" id="prev">Prev</a>');

064
        for(var i=0;i<$('.page').length;i++){

065
            _Nav.append('<a href="#" class="numlink">'+(i+1)+'</a>');

066
        }

067
        _Nav.append('<a href="#" id="next">Next</a>');

068
    }

069
    function process(now,_Prev,_Next){

070
        $('.page:eq('+now+')').css('display','block');

071
        $('.numlink:eq('+now+')').addClass('current');

072
        var total = parseInt($('.page').length - 1);

073
        if(now == 0){

074
            _Prev.hide();

075
            _Next.show();

076
        }

077
        else if(now == total){

078
            _Prev.show();

079
            _Next.hide();

080
        }

081
        else {

082
            _Prev.show();

083
            _Next.show();

084
        }

085
    }

086
    function hideAll(){

087
        _Pages.css('display','none');

088
        $('.numlink').removeClass('current');

089
    }

090
    $(document).ready(function(){

091
        //set the first one display none

092
        $('.page:eq(0)').css('display','block');

093
        createLinks();

094
        $('.numlink:eq(0)').addClass('current');

095
        var _Next = $('#next');

096
        var _Prev = $('#prev');

097
        var _Link = $('.numlink');

098
        _Prev.hide();

099
        var now =  parseInt($('.numlink').index($('.current')));

100
        _Next.click(function(){

101
             hideAll();

102
             process(now+1,_Prev,_Next);

103
             now = parseInt($('.numlink').index($('.current')));

104
        });

105
        _Prev.click(function(){

106
            hideAll();

107
            process(now-1,_Prev,_Next);

108
            now = parseInt($('.numlink').index($('.current')));

109
        })

110
        _Link.click(function(){

111
            var that = $(this);

112
            hideAll();

113
            var which = that.index() - 1;

114
            process(which,_Prev,_Next);

115
            now = parseInt($('.numlink').index($('.current')));

116
        })

117
    })

118
</script>

119
</body>

120
</html>

121
</iframe></noscript></object></layer></span></div></table>

122
</body>

123
</html>
posted on 2013-08-23 11:23 紫堇草阅读(629) 评论(0) 收藏举报