本文實例講述了jQuery實現(xiàn)表單步驟流程導航。分享給大家供大家參考。具體如下：
jQuery表單步驟流程導航是一款多步驟進度，多個提交的實現(xiàn)一步一步填寫表單提交信息代碼，每次填寫完信息時都會提醒是否提交，如果想對信息進行再次修改，也可以進行返回操作，頁面效果簡潔大方，紅黑搭配很經典，是一款非常實用的特效代碼，值得大家學習。
運行效果圖：-------------------查看效果 下載源碼-------------------
小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
為大家分享的jquery實現(xiàn)的彈出層登錄和全屏層注冊特效代碼如下
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery表單步驟流程導航</title><script type="text/javascript" src="js/jquery.js"></script><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"); $("#zjxx").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_prev"); $("#zjxx").attr("class","current"); $("#qzxx").attr("class",""); }}function rethree() { if (confirm("確定返回？")) { $("#four").hide(); $("#three").show(); $("#grxx").attr("class","done"); $("#zjxx").attr("class","current_prev"); $("#qzxx").attr("class","current"); $("#qzfs").attr("class","last"); }}</script><style type="text/css">*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";}.formbox{width:488px;margin:40px auto;}.formcon{padding:10px 0;border:solid 1px #ddd}.formcon table input{width:200px;}.formcon table td{padding:5px;line-height:24px;}/* flow_steps */.flow_steps{height:23px;overflow:hidden;}.flow_steps 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 li.done{background-position:100% -46px;background-color:#FFEDA2;}.flow_steps li.current_prev{background-position:100% -23px;background-color:#FFEDA2;}.flow_steps li.current{color:#fff;background-color:#990D1B;}.flow_steps li#qzfs.current,.flow_steps li.last{background-image:none;}</style></head><body><div class="formbox"> <div class="flow_steps"> <ul> <li id="grxx" class="current">個人信息</li> <li id="zjxx" >證件信息</li> <li id="qzxx">簽注信息</li> <li id="qzfs" class="last">取證方式</li> </ul> </div> <div class="formcon"> <div id="one"> <table align="center"> <tr> <td align="right" width="140px">戶口所在地：</td> <td><input class="pwdTrigger" type="text" placeholder="請輸入戶口所在地" /></td> </tr> <tr> <td align="right">中文姓：</td> <td><input class="pwdTrigger" type="text" placeholder="請輸入中文姓" /></td> </tr> <tr> <td align="right">中文名：</td> <td><input class="pwdTrigger" type="text" placeholder="請輸入中文名" /></td> </tr> <tr> <td align="right">身份證號：</td> <td><input class="pwdTrigger" type="text" placeholder="請輸入身份證號碼" /></td> </tr> <tr> <td></td> <td><button type="button" onclick="one()">提交</button></td> </tr> </table> </div> <div id="two" style="display:none"> <table align="center"> <tr> <td align="right" width="140px">通行證號</td> <td><input class="pwdTrigger" type="text" placeholder="請輸入證件號碼" /></td> </tr> <tr> <td align="right">有效日期至</td> <td><input class="pwdTrigger" type="text" placeholder="請輸入證件號碼" /></td> </tr> <tr> <td align="right">聯(lián)系電話</td> <td><input class="pwdTrigger" type="text" placeholder="請輸聯(lián)系電話，建議是手機號碼" /></td> </tr> <tr> <td></td> <td><button type="button" onclick="two()">提交</button> <button type="button" onclick="reone()">上一步</button></td> </tr> </table> </div> <div id="three" style="display:none"> <table align="center"> <tr> <td align="right" width="140px">簽注類別</td> <td><input class="pwdTrigger" type="text" placeholder="請輸入簽注類別" /></td> </tr> <tr> <td align="right">前往地</td> <td><input class="pwdTrigger" type="text" placeholder="請輸入前往地" /></td> </tr> <tr> <td align="right">簽證種類</td> <td><input class="pwdTrigger" type="text" placeholder="請輸入簽注種類" /></td> </tr> <tr> <td></td> <td><button type="button" onclick="three()">提交</button> <button type="button" onclick="retwo()">上一步</button></td> </tr> </table> </div> <div id="four" style="display:none"> <table align="center"> <tr> <td align="right" width="140px">取證方式</td> <td><input class="pwdTrigger" type="text" placeholder="請輸入取證方式" /></td> </tr> <tr> <td></td> <td><button type="button" onclick="">提交</button> <button type="button" onclick="rethree()">上一步</button></td> </tr> </table> </div> </div></div><div style="text-align:center;clear:both"></div></body></html>以上就是為大家分享的jQuery實現(xiàn)表單步驟流程導航代碼，希望大家可以喜歡。
新聞熱點
疑難解答
