<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta charset="utf-8" />

<title>next page last page</title>

<style type="text/css">

.med_pagebtn {margin-top: 20px;padding: 0 20px;font-size: 1.4rem;}

.med_pagebtn span {width: 45%;display: inline-block;height: 30px;line-height: 30px;text-align: center;color: #FFF;font-size: 1.5rem;}

.prevbtn {float: left;background: #CCC;}

.nextbtn {float: right;background: #10abfe;}

.live {background: #10abfe;}

.dead {background: #CCC;}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

    var pageArray = [ 111, 222, 333, 444, 555 ];

    var _thisValue = 111;

    // 取当前值得下标，不存在时返回 -1

    pageArray.indexof = function(value) {

        for (var i = 0; i < this.length; i++) {

            if (this[i] == value)

                return i;

        }

        return -1;

    }

    // 取当前值的下一个值，不存在时返回 undefined

    pageArray.nextvalue = function(value) {

        var next = -1;

        for (var i = 0; i < this.length; i++) {

            if (this[i] == value)

                next = i + 1;

            if (next == i)

                return this[i];

        }

        return undefined;

    }

    // 取当前值的上一个值，不存在时返回 undefined

    pageArray.prevvalue = function(value) {

        var prev = -1;

        for (var i = this.length - 1; i > -1; i--) {

            if (this[i] == value)

                prev = i - 1;

            if (prev == i)

                return this[i];

        }

        return undefined;

    }

    // 初始化上一页下一页显示状态

    function initPage() {

        $("#" + _thisValue).show();

        $("#" + _thisValue).siblings().hide();

        if (pageArray.length == 1) {

            $("#prevPage").removeClass("live").addClass("dead");

            $("#nextPage").removeClass("live").addClass("dead");

        } else {

            $("#prevPage").removeClass("live").addClass("dead");

            $("#nextPage").removeClass("dead").addClass("live");

        }

        $("#pageGroup").show();

    }

    // 点击下一页

    function nextPage() {

        var nextValue = pageArray.nextvalue(_thisValue);

        if (nextValue) {

            $("#" + nextValue).show();

            $("#" + nextValue).siblings().hide();

            if (pageArray.indexof(nextValue) == pageArray.length - 1) {

                $("#nextPage").removeClass("live").addClass("dead");

            } else {

                $("#nextPage").removeClass("dead").addClass("live");

            }

            $("#prevPage").removeClass("dead").addClass("live");

            _thisValue = nextValue;

        }

        $("#pageGroup").show();

    }

    // 点击上一页

    function prevPage() {

        var prevValue = pageArray.prevvalue(_thisValue);

        if (prevValue) {

            $("#" + prevValue).show();

            $("#" + prevValue).siblings().hide();

            if (pageArray.indexof(prevValue) == 0) {

                $("#prevPage").removeClass("live").addClass("dead");

            } else {

                $("#prevPage").removeClass("dead").addClass("live");

            }

            $("#nextPage").removeClass("dead").addClass("live");

            _thisValue = prevValue;

        }

        $("#pageGroup").show();

    }

    $(function() {

        initPage();

    });

</script>

</head>

<body>

    <div style="width: 100%; height: 200px; margin: 10px; background-color: gray;" id="111">111</div>

    <div style="width: 100%; height: 200px; margin: 10px; background-color: gray;" id="222">222</div>

    <div style="width: 100%; height: 200px; margin: 10px; background-color: gray;" id="333">333</div>

    <div style="width: 100%; height: 200px; margin: 10px; background-color: gray;" id="444">444</div>

    <div style="width: 100%; height: 200px; margin: 10px; background-color: gray;" id="555">555</div>

    <div class="med_pagebtn" id="pageGroup">

        <span class="prevbtn" id="prevPage" onclick="prevPage()">上一页</span>

        <span class="nextbtn" id="nextPage" onclick="nextPage()">下一页</span>

    </div>

</body>

</html>

效果图：

page next page prev的更多相关文章

  1. mysql 数据库封装类：返回索引、关联、字符串数组；分页查询封装类 ：$page=new Page(表的总条数,每页的条数);$sql = "".$page->limit; echo $page->fpage();

    <?php class czy { public $host="localhost"; //地址 public $uid="root"; //用户名 pu ...

  2. Page in/Page out/Page fault

    Paging refers to writing portions, termed pages, of a process' memory to disk. Swapping, strictly sp ...

  3. Linux就这个范儿 第15章 七种武器 linux 同步IO: sync、fsync与fdatasync Linux中的内存大页面huge page/large page David Cutler Linux读写内存数据的三种方式

    Linux就这个范儿 第15章 七种武器  linux 同步IO: sync.fsync与fdatasync   Linux中的内存大页面huge page/large page  David Cut ...

  4. 转载 SharePoint 2013配置Master Page and Page Layout

    转载原地址: http://www.cnblogs.com/huangjianwu/p/4539706.html 涉及到的内容是关于SharePoint 2013如何部署自定义的母版页和布局页. 进入 ...

  5. SharePoint 2013 Deploy Master Page And Page Layout

    2013年9月27日的一篇随笔,其实也是自己编写的部署文档,由于客户是HK的,所以描述部分是用英文. 涉及到的内容是关于SharePoint 2013如何部署自定义的母版页和布局页. First, L ...

  6. datatable：dt.page(dt.page()).draw(false)

    dt.page(dt.page()).draw(false);该方法可以直接返回到当前页,不用重新绘制table 描述 分页是DataTables的一个核心功能,并且该方法提供对表格显示页面的外部控制 ...

  7. selenium page object & Page Factory

    package demo; import java.util.concurrent.TimeUnit; import org.openqa.selenium.By; import org.openqa ...

  8. linux杂记（四）热键[Tab],[ctrl]-c,[ctrl]-d，在线求助man page/info page

    [Tab]按键 他具有[命令补全](接在一串指令的第一个字后面)与[档案补齐](接在第一串指令的第二字以后时)的功能.如 [KANO@kelvin ~]$ ca[tab][tab] cabextrac ...

  9. JSP基本语法--Page指令 <%@page 属性=”内容“%>

    page指令语法:<%@page 属性=”内容“%> 常用:contentType,import,pageEncoding 例子,设置MIME属性,如果使用一些高版本的tomcat,可能自 ...

随机推荐

  1. Cookie与Session的复习

    Cookie Cookie是HTTP协议制定的.先由服务器保存Cookie到浏览器,再下次浏览器请求服务器时把上一次请求得到Cookie再归还给服务器.由服务器创建保存到客户端浏览器的一个键值对(由服 ...

  2. PKU1988磁铁

    Cube Stacking Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 16258   Accepted: 5579 Ca ...

  3. 解决 mysql 数据库 挂掉了

    问题 : mysql运行几天之后就挂掉了 , 修改了mysql 的连接数也解决不了,看代码也没有什么问题,但就是感觉哪个功能一直占着mysql资源,查了一下当前的线程状态 time的单位是 秒 , 可 ...

  4. CentOS7.6安装JDK(Openjdk) - mvn package报错汇总

    错误一: No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK ...

  5. 随机森林（Random Forest，简称RF）

    阅读目录 1 什么是随机森林? 2 随机森林的特点 3 随机森林的相关基础知识 4 随机森林的生成 5 袋外错误率(oob error) 6 随机森林工作原理解释的一个简单例子 7 随机森林的Pyth ...

  6. U盘启动安装WIN7(包含资源的地址）

    这几天在装win7和linux双系统,整理一下 第一种是在正常的windows下,网上下了镜像之后,装虚拟光驱,然后双击安装,按步骤执行即可,这个没什么好讲的. 第二种是windows坏掉,或者木有系 ...

  7. 手游为什么要热更新，C#为什么不能热更新，LUA为什么可以

    热更新是什么?简单的说就是打补丁,只补需要部分,不用重个游戏包重打上传 热更新问题的本质是代码更新而不是资源更新,为什么呢? 大型手游都是将补丁资源放在专门的WEB服务器上,游戏启动时动态下载并放入到 ...

  8. Gearmand 任务分发系统

    简介: Gearmand 是一个用来把工作委派给其它机器.分布式的调用更适合做某项工作的机器.并发的做某项工作在多个调用间做负载均衡.或用来调用其它语言的函数的系统. 简单来讲,就是客户端程序把请求提 ...

  9. out.write(b,0,len)怎么解释？

    参数 缓冲区——要写的数据 从——开始偏移量数据 len——写的字节数 返回值 这个方法不返回一个值. 异常 IOException

  10. C++——代码运行过程详解

    #include <iostream> using namespace std; ;//初始化的全局变量:保存在数据段 char *p1;//未初始化的全局变量:保存在BSS段 int m ...