欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實(shí)現(xiàn)表單步驟流程導(dǎo)航代碼分享

 更新時(shí)間：2015年08月28日 10:56:39   投稿：lijiao  
這篇文章主要介紹了jQuery實(shí)現(xiàn)表單步驟流程導(dǎo)航，代碼實(shí)現(xiàn)效果簡(jiǎn)單精致，推薦給大家，有需要的小伙伴可以參考下。

本文實(shí)例講述了jQuery實(shí)現(xiàn)表單步驟流程導(dǎo)航。分享給大家供大家參考。具體如下：
jQuery表單步驟流程導(dǎo)航是一款多步驟進(jìn)度，多個(gè)提交的實(shí)現(xiàn)一步一步填寫(xiě)表單提交信息代碼，每次填寫(xiě)完信息時(shí)都會(huì)提醒是否提交，如果想對(duì)信息進(jìn)行再次修改，也可以進(jìn)行返回操作，頁(yè)面效果簡(jiǎn)潔大方，紅黑搭配很經(jīng)典，是一款非常實(shí)用的特效代碼，值得大家學(xué)習(xí)。
運(yùn)行效果圖：-------------------查看效果 下載源碼-------------------

小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。
為大家分享的jquery實(shí)現(xiàn)的彈出層登錄和全屏層注冊(cè)特效代碼如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery表單步驟流程導(dǎo)航</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">個(gè)人信息</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">戶(hù)口所在地：</td>
  <td><input class="pwdTrigger" type="text" placeholder="請(qǐng)輸入戶(hù)口所在地" /></td>
 </tr>
 <tr>
  <td align="right">中文姓：</td>
  <td><input class="pwdTrigger" type="text" placeholder="請(qǐng)輸入中文姓" /></td>
 </tr>
 <tr>
  <td align="right">中文名：</td>
  <td><input class="pwdTrigger" type="text" placeholder="請(qǐng)輸入中文名" /></td>
 </tr>
 <tr>
  <td align="right">身份證號(hào)：</td>
  <td><input class="pwdTrigger" type="text" placeholder="請(qǐng)輸入身份證號(hào)碼" /></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">通行證號(hào)</td>
  <td><input class="pwdTrigger" type="text" placeholder="請(qǐng)輸入證件號(hào)碼" /></td>
 </tr>
 <tr>
  <td align="right">有效日期至</td>
  <td><input class="pwdTrigger" type="text" placeholder="請(qǐng)輸入證件號(hào)碼" /></td>
 </tr>
 <tr>
  <td align="right">聯(lián)系電話(huà)</td>
  <td><input class="pwdTrigger" type="text" placeholder="請(qǐng)輸聯(lián)系電話(huà)，建議是手機(jī)號(hào)碼" /></td>
 </tr>
 <tr>
  <td></td> 
  <td><button type="button" onclick="two()">提交</button>&nbsp;&nbsp;&nbsp;&nbsp;<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">簽注類(lèi)別</td>
  <td><input class="pwdTrigger" type="text" placeholder="請(qǐng)輸入簽注類(lèi)別" /></td>
 </tr>
 <tr>
  <td align="right">前往地</td>
  <td><input class="pwdTrigger" type="text" placeholder="請(qǐng)輸入前往地" /></td>
 </tr>
 <tr>
  <td align="right">簽證種類(lèi)</td>
  <td><input class="pwdTrigger" type="text" placeholder="請(qǐng)輸入簽注種類(lèi)" /></td>
 </tr>
 <tr>
  <td></td> 
  <td><button type="button" onclick="three()">提交</button>&nbsp;&nbsp;&nbsp;&nbsp;<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="請(qǐng)輸入取證方式" /></td>
 </tr>
 <tr>
  <td></td> 
  <td><button type="button" onclick="">提交</button>&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" onclick="rethree()">上一步</button></td>
 </tr>
 </table>
 </div>
 </div>
</div>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

以上就是為大家分享的jQuery實(shí)現(xiàn)表單步驟流程導(dǎo)航代碼，希望大家可以喜歡。

相關(guān)文章

  • 基于JQuery的Select選擇框的華麗變身

    基于JQuery的Select選擇框的華麗變身

    HTML Form 表單里的各種組件，例如文本輸入框，textarea，按鈕等，都可以通過(guò)CSS或其它技術(shù)進(jìn)行美化，讓它們看起來(lái)很漂亮了，唯獨(dú)下拉列表選項(xiàng)框(select box),不管你怎么做，它擺在那里總顯得格格不入。
    2011-08-08
  • Jquery+JSon 無(wú)刷新分頁(yè)實(shí)現(xiàn)代碼

    Jquery+JSon 無(wú)刷新分頁(yè)實(shí)現(xiàn)代碼

    基于jquery+json格式文件的無(wú)刷新分頁(yè)實(shí)現(xiàn)代碼，需要的朋友可以參考下。
    2010-04-04
  • 用jquery方法操作radio使其默認(rèn)選項(xiàng)是否

    用jquery方法操作radio使其默認(rèn)選項(xiàng)是否

    用jquery方法操作,使其默認(rèn)選項(xiàng)是或否，具體實(shí)現(xiàn)如下，喜歡的朋友不妨參考下，或許可以用得到哦
    2013-09-09
  • jQuery基礎(chǔ)的工廠(chǎng)函數(shù)以及定時(shí)器的經(jīng)典實(shí)例分析

    jQuery基礎(chǔ)的工廠(chǎng)函數(shù)以及定時(shí)器的經(jīng)典實(shí)例分析

    下面小編就為大家?guī)?lái)一篇jQuery基礎(chǔ)的工廠(chǎng)函數(shù)以及定時(shí)器的經(jīng)典實(shí)例分析。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在
    2016-05-05
  • jQuery與javascript對(duì)照學(xué)習(xí) 獲取父子前后元素 實(shí)現(xiàn)代碼

    jQuery與javascript對(duì)照學(xué)習(xí) 獲取父子前后元素 實(shí)現(xiàn)代碼

    jQuery與javascript對(duì)照學(xué)習(xí)(獲取父子前后元素) ，需要的朋友可以參考下，看看與js有什么不同。
    2009-10-10

    • 最新評(píng)論