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

简单说一下思路：就是把每个页面都用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. JavaWeb之Servlet中ServletConfig和ServletContext

    [声明] 欢迎转载,但请保留文章原始出处→_→ 文章来源:http://www.cnblogs.com/smyhvae/p/4140877.html [正文] 一.ServletConfig:代表当前 ...

  2. pythonweb框架Flask学习笔记02-一个简单的小程序

    #-*- coding:utf-8 -*- #导入了Flask类 这个类的实例将会是我们的WSGI应用程序 from flask import Flask #创建一个Flask类的实例 第一个参数是应 ...

  3. iOS自动布局框架-Masonry详解

    首先,在正式使用Masonry之前,我们先来看看在xib中我们是如何使用AutoLayout     从图中我们可以看出,只要设置相应得局限,控制好父视图与子视图之间的关系就应该很ok的拖出你需要的需 ...

  4. 使用TopShelf做windows服务

    class Program { static void Main(string[] args) { HostFactory.Run(x => { x.RunAsLocalSystem(); x. ...

  5. 机器大数据也离不开Hadoop

    转自:http://gtstorageworld.blog.51cto.com/908359/1286758 根据数据来源划分,大数据主要包括三类:商业运作产生的数据.人类行为产生的数据和机器数据.目 ...

  6. (转)权威支持: 选择正确的 WebSphere 诊断工具

    权威支持: 选择正确的 WebSphere 诊断工具 原文:https://www.ibm.com/developerworks/cn/websphere/techjournal/0807_supau ...

  7. (转)Mysql常用命令行

    原文:http://www.cnblogs.com/TsengYuen/archive/2012/01/11/2319034.html Mysql常用命令行 Mysql经常使用号令行大全 熬头招.my ...

  8. 【数组】Next Permutation

    题目: Implement next permutation, which rearranges numbers into the lexicographically next greater per ...

  9. Linux用户权限规范 /etc/sudoers文件解释

    # User privilege specification root ALL=(ALL) ALL # Members of the admin group may gain root privile ...

  10. R语言之数据处理常用包

    dplyr包是Hadley Wickham的新作,主要用于数据清洗和整理,该包专注dataframe数据格式,从而大幅提高了数据处理速度,并且提供了与其它数据库的接口:tidyr包的作者是Hadley ...