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>

简单的JQuery分页代码的更多相关文章

  1. PHP分页初探 一个最简单的PHP分页代码的简单实现

    PHP分页代码在各种程序开发中都是必须要用到的,在网站开发中更是必选的一项. 要想写出分页代码,首先你要理解SQL查询语句:select * from goods limit 2,7.PHP分页代码核 ...

  2. PHP分页初探 一个最简单的PHP分页代码实现

    PHP分页代码在各种程序开发中都是必须要用到的,在网站开发中更是必选的一项. 要想写出分页代码,首先你要理解SQL查询语句:select * from goods limit 2,7.PHP分页代码核 ...

  3. 自己写的简单的jQuery分页控件

    因为是内部项目,需要分页控件,网上找了一大堆,给领导一看,都说不行,原因很简单,太复杂,领导就想要个简单点的,类似百度的分页,可是自己也没写过Jquery控件,硬着头皮找了些资料,写了这个分页控件,目 ...

  4. 回到顶部最简单的JQuery实现代码

    CSS代码,使用了fixed让对象固定于浏览器窗口: top{position:fixed;bottom:0;right:10px;} jQuery代码,注意正常使用的几个条件:$('#top').c ...

  5. 21个很棒的jQuery分页插件下载

    分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...

  6. 分享5种风格的 jQuery 分页效果【附代码】

    jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示      源码下载 各个 ...

  7. 简单的beego分页功能代码

    一个简单的beego分页小插件(源代码在最下面): 支持条件查询 支持参数保留 支持自定义css样式 支持表/视图 支持参数自定义 默认为pno 支持定义生成链接的个数 使用方式: 1)action中 ...

  8. Jquery 分页插件 Jquery Pagination

    Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...

  9. jquery 分页控件2

    jquery 分页控件(二) 上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的 ...

随机推荐

  1. 用HTML5 Canvas 做擦除及扩散效果

    2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...

  2. unity3D中协程和线程混合

    这是我google unity3D一个问题偶然发现的在stackflow上非常有趣的帖子: 大意是 要在unity3D上从server下载一个zip,并解压到持久化地址.并将其载入到内存中.以下展示了 ...

  3. Fast portable non-blocking network programming with Libevent--转

    Learning Libevent Chapter 0: About this document Chapter 1: A tiny introduction to asynchronous IO. ...

  4. ArcGIS Desktop 与 Excel（转）

    来自:http://blog.csdn.net/kikitamoon/article/details/19043161 微软 OFFICE 产品中,Excel是很强大,并且平民化的表格制作工具.Arc ...

  5. C语言的变量的作用域和生存期

    一.c程序存储空间布局 C程序一直由下列部分组成: 1)正文段——CPU执行的机器指令部分:一个程序只有一个副本:只读,防止程序由于意外事故而修改自身指令:      2)初始化数据段(数据段)——在 ...

  6. android的平台架构及特性

    Android平台采用了整合的策略思想,包括底层Linux操作系统.中间层的中间件和上层的Java应用程序.下面我把Android的特性及其架构体系结构总结一下. 一.Android的平台特性 And ...

  7. 类型转换(CCstring int string char UTF-8互转)

    在做数据转换时,最好包含以下头文件 #include <iostream> #include <cmath> #include <string> #include  ...

  8. 【C语言】02-基本数据类型

    跟其他语言一样,C语言中用变量来存储计算过程使用的值,任何变量都必须先定义类型再使用.为什么一定要先定义呢?因为变量的类型决定了变量占用的存储空间,所以定义变量类型,就是为了给该变量分配适当的存储空间 ...

  9. alert

    先别着急测试,来猜测一下下面一行代码执行的结果 alert(alert(1234567)); 此刻,我自己还不是不太理解 我的分析是这样: alert() 是window下面的一个方法 alert(1 ...

  10. Python(2.7.6) 迭代器

    除了对列表.集合和字典等进行迭代,还能对其他对象进行迭代:实现 __iter__ 方法的对象.例如, 文件对象就是可迭代的: >>> dir(file) ['__class__', ...