必威体育Betway必威体育官网
当前位置:首页 > IT技术

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

时间:2019-10-09 04:46:12来源:IT技术作者:seo实验室小编阅读:83次「手机版」
 

下一步

效果如下

 


完整代码如下

<!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>

<!-- 下一步,下一步 -->
<p id="step1" >
  <p class="panel panel-success">
  	<p class="panel-heading">
  		<h3 class="panel-title">商铺名称</h3>
  	</p>
  	<p class="panel-body">
      <input type="text" placeholder="请输入商铺名称"/><br><br>
	 <button type="button" class="btn btn-primary">上一步</button>
      <button type="button" class="btn btn-success" >下一步</button>
  	</p>
  </p>
</p>
<p id="step2">
  <p class="panel panel-info">
	<p class="panel-heading">
		<h3 class="panel-title">手机号码</h3>
	</p>
	<p class="panel-body">
    <input type="text" placeholder="手机号码"/><br><br>
		<button type="button" class="btn btn-primary" class="btn btn-success" placeholder="地址"/><br><br>
  <button type="button" class="btn btn-primary" onclick="getnext('step2')">上一步</button>
	</p>
</p>
</p>
<!-- 下一步,下一步 -->
</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>

相关阅读

手把手教用matlab做无人驾驶(五)-matlab实现自动Ground

1.在matlab中命令行输入:groundTruthLabeler('caltech_cordova1.avi'),会弹出: 2.点击左上角的Label,在弹出的窗口填写car: 3.

activity-alias实现多程序入口并显示指定view完成

Csdn干嘛不搞个一键转载呢,太不智能了,差评。转自:http://my.oschina.net/zhangqingcai/blog/42085missed call需要一个单独的图标,点

jQuery插件AjaxFileUpload实现ajax文件上传

jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传。 1

python实现推理猜数字游戏Begals

Begals是可以和朋友一起玩的一个推理游戏。你的朋友想到一个随机的、没有重复的3位数字,你尝试去猜测它是什么。 每次猜测之后,朋友

SQL SERVER 分页(2)——利用OFFSET/FETCH NEXT实现分页

在上一篇博客中用ROW_NUMBER实现分页,这次我们利用OFFSET/FETCH NEXT来实现分页,这个是在SQL2012中加入的分页方法,测试数据:--测试数

分享到:

栏目导航

推荐阅读

热门阅读