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

简单说一下思路：就是把每个页面都用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. 怎样使用Navicat Premium导出导入mysql数据库

    首先,在Navicat Premium中连接要导出数据库的mysql数据库. 2 1.填写好连接数据库的信息后就可以连接到需要导出的数据库了. 3 打开要导出的数据库. 4 将数据库的结构和数据导出为 ...

  2. SSH版最大会话连接数

    在登录方法中加入如下两行语句,作为程序的入口: SessionListener.isAlreadyEnter(getHttpRequest().getSession(),this.getUserCod ...

  3. Oracle性能问题sql调优脚本集

    ---------------------------------------------------------------------------------------------------- ...

  4. 网络请求 爬虫学习笔记 一 requsets 模块的使用 get请求和post请求初识别,代理,session 和ssl证书

    前情提要: 为了养家糊口,为了爱与正义,为了世界和平, 从新学习一个爬虫技术,做一个爬虫学习博客记录 学习内容来自各大网站,网课,博客. 如果觉得食用不良,你来打我啊 requsets 个人觉得系统自 ...

  5. 面试题：js如何渲染十万条数据并不卡住界面

    这道题考察了如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条都渲染出来,而应该一次渲染部分 DOM,那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次. ...

  6. ThreadLocal的实现机制

    TLS(Thread Local Storage)通过分配更多内存来解决多线程对临界资源访问的互斥问题,即每个线程均自己的临界资源对象, 这样也就不会发生访问冲突,也不需要锁机制控制,比较典型的以空间 ...

  7. dubbo学习(1)--简单的入门搭建实例

    转载请注明源文出处:http://www.cnblogs.com/lighten/p/6828026.html 1 简介 dubbo是一个分布式服务框架,由阿里巴巴的工程师开发,致力于提供高性能和透明 ...

  8. tensorflow进阶篇-4(损失函数1)

    L2正则损失函数(即欧拉损失函数),L2正则损失函数是预测值与目标函数差值的平方和.L2正则损失函数是非常有用的损失函数,因为它在目标值附近有更好的曲度,并且离目标越近收敛越慢: # L = (pre ...

  9. 解决ajax跨域问题的一种方法

    解决ajax跨域问题的一种方法 前后端分离经常用json来传输数据,比较常见的问题就有ajax跨域请求的错误问题,这里是我的一种解决方法: 在java中加入如下的注解类: import org.spr ...

  10. 使用 Chrome 生成 UUID

    打开Chrome,键入 Ctrl + Shift + J,打开 JS 控制台,然后输入下面的JS代码: function getGUID( ) { function _p8(s) { var p = ...