仅一个form表单 js实现注册信息依次填写提交功能

我们原先是一个很长的form表单，里面有很多选项。客户反馈这样不够友好，容易看花眼。因此进行改进，实现多步骤进度，多个提交的实现(其实只有一个form提交)。

实现的思路：将表单的选项装入多个div中，一个显示，其他隐藏。

实现效果如下：

1、Javascript代码

2、CSS代码

.flow_steps ul li { float:left; height:23px; padding:0 40px 0 30px; line-height:23px; text-align:center; background:url(img/barbg.png) no-repeat 100% 0 #E4E4E4; font-weight:bold;}
.flow_steps ul li.done { background-position:100% -46px; background-color:#FFEDA2;}
.flow_steps ul li.current_prev { background-position:100% -23px; background-color:#FFEDA2;}
.flow_steps ul li.current { color:#fff; background-color:#990D1B;}
.flow_steps ul li.last { background-image:none;}

3、HTML代码

 

 

  

  
   

    
个人信息
    
证件信息
    
签注信息
    
取证方式
   
  
  
 
 
 
 

  
 
 

源码下载：http://xiazai.jb51.net/201606/yuanma/Javascript-formshow(jb51.net).rar

 以上就是本文的全部内容，希望对大家学习Javascript程序设计有所帮助。