jquery实现上一页下一页
简单说一下思路：就是把每个页面都用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{background-color:#D25802;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="下一步»" />
</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="«上一步" />
<input type="button" class="next right" value="下一步»" />
</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="«上一步" />
<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实现上一页下一页相关推荐
- php分页不跳转,分页源代码，分页时上一页下一页不显示，但可以跳转
分页源代码,分页时上一页下一页不显示,但可以跳转 $sql="select * from product where pronum like'%$key%' or pdes like '%$ ...
- eayUi panel实现上一页下一页
function 是为了第一次加载的时候显示页面 butt1和butt2触发上一页下一页,后面绑定参数即可 问题:.panel({href:href})到后台的时候会请求两次,这个问题还没有解决 把 ...
- html分页首页上一页下一页,HTML静态分页（形如：首页，上一页，下一页，尾页）...
在HTML中有时候我们会用到静态分页,一次拿回一定量的数据结果条目,我们会以形如:第2页,共12页 首页 上一页 下一页 尾页 的方式进行静态分页,以下是该种静态分页的代码,供兄弟姐妹们参考. fu ...
- 用数据库的方式编辑上一页 下一页
实现文章上一页 下一页的效果 通过调用数据库 using(SqlConnection con=new SqlConnection(@"server=..")) { Guid a ...
- php分页上一页下一页判断,一个分页函数：显示“上一页下一页”等
'************************************************** '函数名:ShowPage '作 用:显示"上一页 下一页"等信息 '参 数 ...
- Asp.net(c#)GridView分页时用图片显示上一页,下一页
Asp.net(c#)GridView分页时用图片显示上一页,下一页 效果展示: 需要的两张图片: 详细代码: Code <%@ Page Language="C#" ...
- php 上一页 下一页代码,php无限上一页，下一页，求完善代码？？
php无限上一页,下一页,求完善代码?? mip版 关注:150 答案:4 悬赏:50 解决时间 2021-01-25 16:24 已解决 2021-01-24 18:25 $pagesize= ...
- html内容页上一页下一页,帝国CMS内容页增加内容分页上一页标签功能！
帝国CMS一直以来升级没有提供内容分页的上一页标签功能,只有一个:内容页下一页[!--next.page--] 标签!所以下面就是要改造一下这个标签,实现内容页上一页的功能! 步骤如下: 打开e/cl ...
- Android开发实现上一页,下一页显示内容
最近写了个上一页下一页显示Demo,感觉还是比较好实现!通过设置listview的每页item显示的个数,然后控制返回item的count实现点击按钮上一页下一页效果. 一,布局文件(若是想实现滑动的 ...
- 图片切换上一页 下一页
切换图片 点击上一页切换到上一张,点击一下页切换到下一张 <!DOCTYPE html> <html><head><meta charset="UT ...
最新文章
- 虚幻UE4中如何采集360度全景图片和VR视频
- 截取列表前面100行_python列表
- 【以太坊】私有链和测试网的区别
- c# 中文字符（全角、半角）通用处理
- Linux入门(10)——Ubuntu16.04使用pip3和pip安装numpy,scipy,matplotlib等第三方库
- solr5.3.1 mysql_Solr5.3.1 dataimport 导入mysql数据
- Chapter 3 Phenomenon——19
- mysql 自增id replace_MySQL--REPLACE INTO与自增
- android中seekbar 常用属性列表,随笔–android中修改SeekBar控件默认显示-Fun言
- [补档]noip2019集训测试赛（十五）
- swift实例教程_Swift示例教程基础
- 芒果 TV Redis 服务解决方案
- 自动化框架应该具备的要点
- 使用C#实现DHT磁力搜索的BT种子后端管理程序+数据库设计（开源）[搜片神器]
- 手机照片局部放大镜_拼音输入法哪个最好？百度手机输入法——最受年轻人喜爱...
- 【Ubuntu teamview 安装与卸载】
- android模拟器mac版本下载,天天模拟器for Mac-天天模拟器mac版下载 V1.0.7-PC6苹果网...
- 华为交换机常见VLAN操作
- 5个问题教你如何更好解决问题
- Debian 配置RTL8723BU连接wifi网络