1. [代码][JavaScript]代码     

001
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" >
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>