多步骤提交表单html代码-U码80

引入JS代码

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){ //当网页加载完成，开始执行
// 注册分步实现
$('#step1_next').click(function(){ //点击step1区块的下一步按钮，隐藏step1，显示step2
$(".step1").css({"display":"none"});
$(".step2").css({"display":"block"});
});
$('#step2_back').click(function(){ //点击step2区块的返回按钮，隐藏step2，显示step1
$(".step2").css({"display":"none"});
$(".step1").css({"display":"block"});
});
$('#step2_next').click(function(){ //点击step2区块的下一步按钮，隐藏step2，显示step3
$(".step2").css({"display":"none"});
$(".step3").css({"display":"block"});
});
$('#step3_back').click(function(){ //点击step3区块的返回按钮，隐藏step3，显示step2
$(".step3").css({"display":"none"});
$(".step2").css({"display":"block"});
});
});
</script>

引入CSS

.step1{width:100%;
height:auto;
overflow:hidden;
zoom:1;}

.step2,.step3{width:100%;
height:auto;
overflow:hidden;
zoom:1;
display:none;}

Html代码

<div class="step1">
基本内容
<input class="button2" type="button" id="step1_next" value="下一步" />
</div>
<div class="step2">
基1111本内容
<input class="button2" type="button" id="step2_next" value="下一步" />
</div>
<div class="step3">
基2222本内容
<input class="button2" type="submit" value="提交表单" />
</div>

原文链接：https://www.um80.com/435.htm，转载请注明出处。