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

简单说一下思路：就是把每个页面都用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. ffmpeg开发基础知识

    1.音频采集 面临的问题:延时敏感,噪声消除,回声消除,静音检测 主要参数: 采样率,位宽,声道数,音视频帧 采样率: 也称为采样速度或者采样率,定义了每秒从连续信号中提取并组成离散信号的采样个数,它 ...

  2. iOS-UIView一些坐标和位置方法封装

    新建基于UIView扩展类 UIView+wkjFrame,此类是为了方便获取一些基于UIView类UI控件的坐标和位置的简化,直接引用即可 UIView+wkjFrame.h - (CGPoint) ...

  3. 【LeetCode】502. IPO

    题目 假设 LeetCode 即将开始其 IPO.为了以更高的价格将股票卖给风险投资公司,LeetCode希望在 IPO 之前开展一些项目以增加其资本. 由于资源有限,它只能在 IPO 之前完成最多 ...

  4. 抓取出现时间3s后消失的元素

    背景:日常自动化脚本编写中,可能需要定位,获取元素的位置,通常会遇到一种元素,只出现几秒,几秒后慢慢消失的,这个时候,如果要抓取这个提示,如果和它比手速,当你手速比较快,可以箭头抓取到,但当这个元素的 ...

  5. Ubuntu16.04 Nvidia驱动、CUDA安装

    安装Nvidia驱动和CUDA时往往很费力,经常有莫名奇妙的错误,这次安装十分顺畅,权当记录一下,以方便以后再次安装. 一.Nvidia显卡驱动安装 sudo add-apt-repository p ...

  6. [原创] rtrim() 格式化中文问题

    先看以下代码 var_dump(rtrim("互联网产品.", ".")); 我们以为会得到结果 "互联网产品", 但实际上获得的是 &qu ...

  7. (转)Python rsplit() 方法

    原文:https://www.cnblogs.com/wushuaishuai/p/7792874.html 目录 描述 语法 参数 返回值 实例 正文 回到顶部 描述 Python rsplit() ...

  8. MySQl中的\g和\G

    1. \g 在MySQL的sql语句后加上\g,效果等同于加上定界符,一般默认的定界符是分号; 2. \G 在MySQL的sql语句后加上\G,表示将查询结果进行按列打印,可以使每个字段打印到单独的行 ...

  9. 一桩由X509Certificate2引发的血案

    A process serving application pool '. The data field contains the error number. 在某次网站更新后,发现wcf服务不可用了 ...

  10. Scala的下载和安装（本地）

    前言 Scala版本的选法: 目前,Kafka库和JDBC并不支持Scala2.11的编译,以及结合大多数人的使用请来看.         scala2.10.*为主,在这,scala2.10.4版本 ...