js分页代码

<!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(){
        //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>
posted @ 2015-03-30 16:44  前度天下  阅读(304)  评论(0)    收藏  举报