注：文章转载于肖肖的博客；

简单说一下思路：就是把每个页面都用position：absolute的属性使每个页面都从叠在一起。然后通过$().hide()隐藏和$().show()显示。点击当前页中的下一页，先获取这一页的index索引。然后通过加1，知道下一页的索引，先让所有页面隐藏，再让下一页显示。

总之，获取索引，除了下一页所有页面隐藏，这样思路。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet"/> 
<link href="css/font-awesome.css" rel="stylesheet"/>
<style>

#wizard {overflow:hidden;height:450px;margin:20px auto;width:570px;position:relative;-moz-border-radius:5px;-webkit-border-radius:5px;}
#wizard .items{width:20000px; clear:both; position:absolute;}
#wizard .right{float:right;}
.lists{text-align: center;background:#EB6100;}
#status{height:35px;padding-left:25px !important;display:inline-block;}
#status li{float:left;color:#fff;padding:18px 30px;list-style:none;margin-right:30px;}
#status li.active{font-weight:normal;}
.active{background-color:#D25802;}
.page{padding:20px 30px;width:570px;float:left;position:absolute;}
.page h3{height:42px; font-size:16px; border-bottom:1px dotted #ccc; margin-bottom:20px; padding-bottom:5px}
.page h3 em{font-size:12px; font-weight:500; font-style:normal}
.page p{line-height:24px;}
.page p label{font-size:14px; display:block;}
.page p #pass{padding:0px;}
.btn_nav{height:36px; line-height:36px; margin:20px auto;}
.prev,.next{width:100px; height:45px; line-height:45px; border:1px solid #d3d3d3; cursor:pointer}

</style>
</head>
<body>
<!--这是注册的页面-->
<div id="main">
            <div class="logo"><img src="img/slogo.png"/>会员注册</div>
   
   
   <form action="#" method="post">
    <div class="lists">
     <ul id="status">
  <li class="active"><strong>1.</strong>设置用户名</li>
  <li><strong>2.</strong>填写账号信息</li>
  <li><strong>3.</strong>完成</li>
 </ul>
    </div>
   
 <div id="wizard">

<div class="items">
   <div class="page">
               <p><label>手机号：</label><input type="text" class="form-control" id="user" name="username" /></p>
               <p><label>验证码：</label><input type="password" class="form-control" id="pass" name="password" /></p>
                <p><label>邀请码：</label><input type="text" class="form-control" id="pass" name="invite-num" /></p>
               <div class="btn_nav">
                  <input type="button" class="next right" value="下一步&raquo;" />
               </div>
            </div>
   <div class="page">
               <h3>填写联系信息<br/><em>请告诉我们您的联系方式。</em></h3>
               <p><label>E-mail：</label><input type="text" class="form-control" name="email" /></p>
               <p><label>QQ：</label><input type="text" class="form-control" name="qq" /></p>
               <div class="btn_nav">
                  <input type="button" class="prev" style="float:left" value="&laquo;上一步" />
                  <input type="button" class="next right" value="下一步&raquo;" />
               </div>
            </div>
   <div class="page">
               <h3>完成注册<br/><em>点击确定完成注册。</em></h3>
               <h4>马卡龙欢迎您！</h4>
               <p>请点击“确定”按钮完成注册。</p>
               <br/>
               <br/>
               <br/>
               <div class="btn_nav">
                  <input type="button" class="prev" style="float:left" value="&laquo;上一步" />
                  <input type="button" class="next right" id="sub" value="确定" />
               </div>
            </div>
  </div>
 </div>
</form>
</div>

<script src="js/jQuery-1.9.1.min.js"></script>

<script>

$(function(){
$(".page").hide();          //所有页面都隐藏
$("#status li").removeClass("active");      //让导航条都不添加样式
$(".items .page").eq(0).show();                 //默认第一个页面显示
$("#status li").eq(0).addClass("active");    //第一个导航加样式
//下一步
     $(".next.right").click(function(){
    var num=$(this).parent().parent().index()+1;   //当前这个page的索引加1，指的是下一页
    $(".page").hide();                                 //所有页面都隐藏
    $(".items .page").eq(num).show();       //下一个页面显示
    $("#status li").removeClass("active");     //所有导航条都清除样式
    $("#status li").eq(num).addClass("active");   //当前页面的那个导航添加样式
    
     });
     
     //上一步
     $(".prev").click(function(){
        var num=$(this).parent().parent().index()-1;
        $(".page").hide();
    $(".items .page").eq(num).show();
    $("#status li").removeClass("active");
    $("#status li").eq(num).addClass("active");
     });
     
     });
</script>
</body>
</html>

jquery实现上一页下一页的更多相关文章

  1. Unity上一页下一页切换功能实现源码（仅供参考）

    在做项目时我们有时需要实现切换上一页下一页图片,切换上一首下一首歌曲等等类似的功能.这里写了个简单的实现源码(仅供参考),要是有更好的方法欢迎提出来,共同进步~ 以切换上一页下一页图片为例: usin ...

  2. css -- 映像 ，分页（上一页下一页）

    1.映像:-webkit-box-reflect:blow 2px -webkit-gradient( linear, left top, left bottom, from(transparent) ...

  3. eayUi panel实现上一页下一页

    function 是为了第一次加载的时候显示页面 butt1和butt2触发上一页下一页,后面绑定参数即可 问题:.panel({href:href})到后台的时候会请求两次,这个问题还没有解决 把 ...

  4. php网页上一页下一页翻页

    这几天做项目因为数据太多,需要对信息进行上下翻页展示,就自己写了翻页的代码 大致功能就是页面只显示几条信息,按上一页.下一页切换内容,当显示第一页时上一页和首页选项不可选,当页面加载到最后一页时下一页 ...

  5. Android ListView上拉获取下一页

    关于ListView上拉刷新的需求很多,实现方式也多种多样. 一般是简单的通过一个page变量来控制当前请求的页数,然后上拉的时候就发送请求. 实现出来后,经过测试哥的折腾,发现有诸多细节没有处理好, ...

  6. GridView利用PagerTemplate做分页显示设置上一页下一页转到下拉转页

    效果如图: 代码如下: aspx页: <asp:GridView ID="GridViewMain" runat="server" OnPageIndex ...

  7. C# Winform学习---MDI窗体的设计,PictureBox控件（图片上一页下一页）,Timer控件,MenuStrip控件

    一.MDI窗体的设计 1.MDI简介 MDI(Multiple Document Interface)就是所谓的多文档界面,与此对应就有单文档界面 (SDI), 它是微软公司从Windows 2.0下 ...

  8. Web 上一页下一页 用超链接 用按钮

              方法一超链接 Default.aspx.cs html代码************************************************************* ...

  9. jsp实现上一页下一页翻页功能

    前段时间一直忙于期末考试和找实习,好久没写博客了. 这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客. 要实现翻页功能,只需 ...

随机推荐

  1. JDK源码学习之 java.util.concurrent.automic包

    一.概述 Java从JDK1.5开始提供了java.util.concurrent.atomic包,方便程序员在多线程环境下无锁的进行原子操作.原子变量的底层使用了处理器提供的原子指令,但是不同的CP ...

  2. iOS--MJRefresh的使用 上拉刷新和下拉加载

    1.一般使用MJRefresh 来实现上拉刷新和下拉加载功能 2.MJRefresh 下载地址:https://github.com/CoderMJLee/MJRefresh 3. MJRefresh ...

  3. 直接插入排序实现(Java)

    直接插入排序介绍 直接插入排序的基本操作是将一个记录插入到已经排好序的有序表中,从而得到一个新的.记录数增1的有序表.     怎么理解呢?就是将n个待排序的元素看成一个有序表和一个无序表,开始时有序 ...

  4. QQ聊天框测试用例设计

    QQ.微信聊天框的主要功能就是发送消息和接收别人发过来的消息. 消息内容类型: 纯文字 纯图片 纯表情 文字+表情 文件 发送键: 点击“发送”发送 使用快捷键发送(针对电脑端) 用户在线状态: 在线 ...

  5. IIS Express 配置 Json

    在VS2013中调试D3官网的一些Sample过程中遇到了一个奇怪的问题:凡是Sample中使用的数据源是json文件时候,smaple 就无法在浏览器中正常运行.经调试后发现根本原因是IIS Exp ...

  6. vim实践学习

    http://coolshell.cn/articles/5426.html http://www.lagou.com/jobs/138351.html awk:http://coolshell.cn ...

  7. python中如何使输出不换行

    1.在python 2.x版本中,使用“,”(不含双引号)可使输出不换行,例如 2.python 3.x版本输出不换行格式如下 print(x, end="")    end=&q ...

  8. habase 报错 ERROR: Can't get master address from ZooKeeper; znode data == null

    方法一:查看日志报SessionExpiredException: KeeperErrorCode = Session expired for /hbase/master 所以是hbase 和 zoo ...

  9. SourceTree跳过Atlassian账号，免登陆，跳过初始设置

    SourceTree 安装之后需要使用账号登陆以授权,并且是强制登陆. 登录过程非常漫长,并未在不FQ的情况下是不能成功的,下面记录一下跳过登录的方法. 装之后,转到用户本地文件夹下的 SourceT ...

  10. golang prometheus包的使用

    prometheus包提供了用于实现监控代码的metric原型和用于注册metric的registry.子包(promhttp)允许通过HTTP来暴露注册的metric或将注册的metric推送到Pu ...