html+css+js 填写表单实现下一步上一步操作

效果如下

完整代码如下

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>Bootstrap 实例 - 带语境色彩的面板</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head><style>
#step1{
display:block;
}
#step2,#step3{display: none;
}
#step1,#step2,#step3{position: absolute;width: 100%;height: 40%;left: 2%;top:10%;
}
</style>
<body><!-- 下一步，下一步 -->
<div id="step1" ><div class="panel panel-success"><div class="panel-heading"><h3 class="panel-title">商铺名称</h3></div><div class="panel-body"><input type="text" placeholder="请输入商铺名称"/><br><br><button type="button" class="btn btn-primary">上一步</button><button type="button" class="btn btn-success" onclick="getnext('step2')" >下一步</button></div></div>
</div>
<div id="step2"><div class="panel panel-info"><div class="panel-heading"><h3 class="panel-title">手机号码</h3></div><div class="panel-body"><input type="text" placeholder="手机号码"/><br><br><button type="button" class="btn btn-primary" onclick="getnext('step1')">上一步</button><button type="button" class="btn btn-success" onclick="getnext('step3')">下一步</button></div>
</div>
</div>
<div id="step3"><div class="panel panel-info"><div class="panel-heading"><h3 class="panel-title">实体店地址</h3></div><div class="panel-body"><input type="text" placeholder="地址"/><br><br><button type="button" class="btn btn-primary" onclick="getnext('step2')">上一步</button></div>
</div>
</div>
<!-- 下一步，下一步 -->
</body>
<script>
function getnext(i){alert(i);var sz=new Array("step1","step2","step3");for(var j=0;j<sz.length;j++){if(i==sz[j]){document.getElementById(i).style.display="block";}else{document.getElementById(sz[j]).style.display="none";}}
}
</script>
</html>

html+css+js 填写表单实现下一步上一步操作相关推荐

JS实现表单多文件上传样式美化支持选中文件后删除相关项
http://www.youdaili.net/javascript/5903.html 转载于:https://www.cnblogs.com/as3lib/p/6816264.html
Html 表单提交【js获取表单提交数据】
Html 原生获取表单提交数据 // 提示框淡入淡出<style type="text/css">.message {display: none;padding: 2 ...
基于React和Node.JS的表单录入系统的设计与实现
一.写在前面这是一个真实的项目,项目已经过去好久了,虽然很简单,但还是有很多思考点,跟随着笔者的脚步,一起来看看吧.本文纯属虚构,涉及到的相关信息均已做虚构处理, 二.背景人活着一定要有信仰,没有 ...
JS 验证表单不能为空
开发交流QQ群: 173683895 173683895 526474645 人满的请加其它群 JS 验证表单不能为空的简单demo,先看效果图实现代码 <!--index.wxm ...
JavaFX官方教程（六）之带有JavaFX CSS的花式表单
翻译自带有JavaFX CSS的花式表单本教程通过添加级联样式表(CSS)使您的JavaFX应用程序看起来很有吸引力.您开发设计,创建.css文件并应用新样式. 在本教程中,您将获取一个使用标签 ...
解决iphone填写表单时，表单项获取焦点时往下拉屏，导致顶部标题栏下滑错位...
$(function () {//解决iphone填写表单时,表单项获取焦点时往下拉屏,导致顶部标题栏下滑错位var u = navigator.userAgent;var isiOS = !!u.m ...
CSS基础——CSS 列表和表单【学习笔记】
CSS 列表和表单 1. 列表标签(重点) 表格是用来显示数据的,列表是用来布局的. 概念: 容器里面装载着结构,样式一致的文字或图表的一种形式,叫列表特点: 列表最大的特点就是整齐 .整洁. 有 ...
让一个网页打开的同时自动为另一个网页自动填写表单并提交
让一个网页打开的同时自动为另一个网页自动填写表单并提交 if you use "window.open" to open the window,you can ...
关于表单的java的程序_JAVA BOT程序模拟人类用户填写表单并发送
仿真表单:BOT程序模拟人类用户填写表单并发送抓取表单: HTTPSocket http = new HTTPSocket(); SocketFactory.setProxyHost(" ...

html+css+js 填写表单实现下一步上一步操作

效果如下

完整代码如下

html+css+js 填写表单实现下一步上一步操作相关推荐

最新文章

热门文章