我们原先是一个很长的form表单，里面有很多选项。客户反馈这样不够友好，容易看花眼。因此进行改进，实现多步骤进度，多个提交的实现(其实只有一个form提交)。
实现的思路：
将表单的选项装入多个div中，一个显示，其他隐藏
。实现效果如下：
1、JavaScript代码
<script type="text/javascript">
function one() {
if (confirm("确定提交？")) {
$("#one").hide();
$("#two").show();
$("#grxx").attr("class","current_prev");
$("#zjxx").attr("class","current");
}
}
function two() {
if (confirm("确定提交？")) {
$("#two").hide();
$("#three").show();
$("#grxx").attr("class","done");
$("#zjxx").attr("class","current_prev");
$("#qzxx").attr("class","current");
}
}
function three() {
if (confirm("确定提交？")) {
$("#three").hide();
$("#four").show();
$("#grxx").attr("class","done");
$("#qzxx").attr("class","current_prev");
$("#qzfs").attr("class","current");
}
}
function reone() {
if (confirm("确定返回？")) {
$("#one").show();
$("#two").hide();
$("#grxx").attr("class","current");
$("#zjxx").attr("class","");
}
}
function retwo() {
if (confirm("确定返回？")) {
$("#three").hide();
$("#two").show();
$("#grxx").attr("class","current");
$("#qzxx").attr("class","");
}
}
function rethree() {
if (confirm("确定返回？")) {
$("#four").hide();
$("#three").show();
$("#grxx").attr("class","current");
$("#qzfs").attr("class","last");;
}
}
2、CSS代码
3、HTML代码