jquery 提交表單制作一個簡單的radio單選按鈕選中選項卡



165 659 220



特效描述:提交表單制作 radio單選按鈕 選中選項卡,jquery特效制作適用在表單里面用radio單選按鈕選中制作選項卡、在表單里面這種radio單選按鈕選項卡是非常常用的特效。

代碼結構

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

3. HTML代碼

<div class="bankinfo">
	<div class="banktit"><h2>選擇銀行卡</h2></div>
	<ul class="choosebank">
		<li id="ban1" class="cur"><input type="radio" name="1" id="bank1" value="" class="radiobtn" checked="checked" /><label class="bank-01" for="bank1"></label></li>
		<li id="ban2"><input type="radio" name="1" id="bank2" value="" class="radiobtn" /><label class="bank-02" for="bank2"></label></li>
		<li id="ban3"><input type="radio" name="1" id="bank3" value="" class="radiobtn" /><label class="bank-03" for="bank3"></label></li>
		<li id="ban4"><input type="radio" name="1" id="bank4" value="" class="radiobtn" /><label class="bank-04" for="bank4"></label></li>
	</ul>
	<div class="clear"></div>
</div><!--bankinfo end-->
<div class="bankinfo">
	<div class="banktit"><h2>填寫銀行卡信息</h2></div>
	<div class="bankbox">
		<div class="bankcon">
			<form method="post" action="" class="icbcform">
			<table width="100%">
				<tr>
					<td width="110px" align="right">真實姓名:</td>
					<td width="160px"><input type="text" value="" name="name" class="input" datatype="mz" nullmsg="請輸入用戶名!" errormsg="姓名不合規范,請重新輸入!" /></td>
					<td><div class="Validform_checktip">銀行卡戶主身份信息必須與基金賬戶戶主身份信息相同!</div></td>
				</tr>
				<tr>
					<td align="right">銀行卡類型:</td><td><select name=""  class="select bankselect" disabled="disabled"><option value="icbc" selected="selected">工商銀行卡</option><option value="ccb">建設銀行卡</option><option value="abc">農業銀行卡</option><option value="cmb">招商銀行卡</option><option value="cmbc">民生銀行卡</option><option value="spdb">浦發銀行卡</option><option value="cib">興業銀行卡</option><option value="ecitic">中信銀行卡</option></select></td>
					<td><div class="Validform_checktip">申購<b class="red">5</b>折、定投<b class="red">4</b>折</div></td>
				</tr>
				<tr>
					<td align="right">銀行卡號:</td>
					<td><input type="text" value="" name="e-card" class="input" datatype="yhk" nullmsg="請輸入銀行卡號!" errormsg="請輸入銀行卡號碼有誤!"  /></td>
					<td><div class="Validform_checktip">請正確填寫銀行卡號,請注意區分16位/19位銀行卡號碼。</div></td>
				</tr>
				<tr>
					<td align="right">證件類型:</td><td><select name=""  class="select"><option>身份證</option><option>軍官證</option><option>駕使證</option></select></td><td></td>
				</tr>
				<tr>
					<td align="right">證件號碼:</td>
					<td><input type="text" value="" name="card" class="input" datatype="i" nullmsg="請輸入證件號碼!" errormsg="請輸入您的證件號碼有誤!"  /></td>
					<td><div class="Validform_checktip">請正確填寫開卡證件號碼,請注意區分15位/18位身份證。</div></td>
				</tr>
				<tr>
					<td align="right">手機號碼:</td>
					<td><input type="text" value="" name="tel" class="input" datatype="m" nullmsg="請輸入手機號碼!" errormsg="請輸入您的手機號碼有誤!"  /></td>
					<td><div class="Validform_checktip">請輸入11位有效手機號碼。</div></td>
				</tr>
				<tr>
					<td></td><td colspan="2"><input type="submit" id="" class="nextbtn" value="下一步" /></td>
				</tr>
			</table>
			</form>							
			<div class="tipbox">
				<dl>
					<dt>溫馨提示:</dt>
					<dd>(1)支持全國范圍工行借記卡,支持網銀U盾或動態口令卡進行開戶、交易和定投。</dd>
					<dd>(2)工行卡網上交易單筆劃款金額和單日累計劃款金額均無限額。</dd>
					<dd>(3)持有效證件到工商銀行網點辦理一張借記卡;通過工行柜臺開通個人網上銀行業務,并辦理U盾或電子銀行口令卡。</dd>
					<dd>(4)請在正式開戶前進行上網瀏覽器的設置:打開瀏覽器->工具菜單->internet選項->隱私->點擊“阻止彈出窗口”后的“設置”按鈕,在“要允許的網站地址”添加mybank.dccnet.com.cn網站->在“通知和篩選級別”中“阻止彈出窗口時顯示信息欄”前的勾去掉;在“篩選級別”中選擇“允許來自安全站點的彈出窗口”;然后關閉返回,再確認。操作完成后關閉所有瀏覽器,重新打開瀏覽器再進行操作。</dd>
					<dd>(5)請閱讀了解《國聯安基金投資人權益須知》</dd>
					<dd>(6)如有疑問可咨詢國聯安基金客服中心(4008888688)或工商銀行客服中心(95588)。</dd>
				</dl>	
			</div>
		</div><!--bankcon end-->
		<div class="bankcon" style="display:none;">
			<form method="post" action="" class="ccbform">
			<table width="100%">
				<tr>
					<td width="110px" align="right">真實姓名:</td>
					<td width="160px"><input type="text" value="" name="name" class="input" /></td>
					<td><div class="Validform_checktip">銀行卡戶主身份信息必須與基金賬戶戶主身份信息相同!</div></td>
				</tr>
				<tr>
					<td align="right">銀行卡類型:</td><td><select name=""  class="select bankselect" disabled="disabled"><option value="icbc">工商銀行卡</option><option value="ccb" selected="selected">建設銀行卡</option><option value="abc">農業銀行卡</option><option value="cmb">招商銀行卡</option><option value="cmbc">民生銀行卡</option><option value="spdb">浦發銀行卡</option><option value="cib">興業銀行卡</option><option value="ecitic">中信銀行卡</option></select></td>
					<td><div class="Validform_checktip">申購<b class="red">7</b>折、定投<b class="red">4</b>折</div></td>
				</tr>
				<tr>
					<td align="right">銀行卡號:</td>
					<td><input type="text" value="" name="e-card" class="input" /></td>
					<td><div class="Validform_checktip">請正確填寫銀行卡號,請注意區分16位/19位銀行卡號碼。</div></td>
				</tr>
				<tr>
					<td align="right">證件類型:</td><td><select name=""  class="select"><option>身份證</option><option>軍官證</option><option>駕使證</option></select></td><td></td>
				</tr>
				<tr>
					<td align="right">證件號碼:</td>
					<td><input type="text" value="" name="card" class="input" /></td>
					<td><div class="Validform_checktip">請正確填寫開卡證件號碼,請注意區分15位/18位身份證。</div></td>
				</tr>
				<tr>
					<td align="right">手機號碼:</td>
					<td><input type="text" value="" name="tel" class="input" /></td>
					<td><div class="Validform_checktip">請輸入11位有效手機號碼。</div></td>
				</tr>
				<tr>
					<td></td><td colspan="2"><input type="submit" id="" class="nextbtn" value="下一步" /></td>
				</tr>
			</table>
			</form>
			<div class="tipbox">
				<dl>
					<dt>溫馨提示:</dt>
					<dd>1、支持全國范圍建行借記卡,支持網銀U盾或動態口令卡進行開戶和交易、支持網銀U盾進行定投。</dd>
					<dd>2、建行卡網上交易單筆/單日劃款金額不超過500萬元。</dd>
					<dd>3、持有效證件到建設銀行網點辦理一張借記卡;通過建行柜臺開通個人網上銀行業務,并辦理U盾或動態口令卡;請在卡中至少預留1分錢,系統需在身份驗證時扣除您1分錢。</dd>
					<dd>4、請在正式開戶前進行上網瀏覽器的設置:打開瀏覽器-> 工具菜單->internet選項->隱私->“編輯”按鈕/“站點”按鈕增加“www.ccb.com”網站,并點擊“允許”按鈕,然后確認返回,再確認。操作完成后,重新打開瀏覽器再進行操作。</dd>
					<dd>5、請閱讀了解《國聯安基金投資人權益須知》</dd>
					<dd>6、如有疑問可咨詢國聯安基金客服中心(4008888688)或建設銀行客服中心(95533)。</dd>
				</dl>	
			</div>
		</div><!--bankcon end-->
		<div class="bankcon" style="display:none;">
			<form method="post" action="" class="abcform">
			<table width="100%">
				<tr>
					<td width="110px" align="right">真實姓名:</td>
					<td width="160px"><input type="text" value="" name="name" class="input" /></td>
					<td><div class="Validform_checktip">銀行卡戶主身份信息必須與基金賬戶戶主身份信息相同!</div></td>
				</tr>
				<tr>
					<td align="right">銀行卡類型:</td><td><select name=""  class="select bankselect" disabled="disabled"><option value="icbc">工商銀行卡</option><option value="ccb">建設銀行卡</option><option value="abc" selected="selected">農業銀行卡</option><option value="cmb">招商銀行卡</option><option value="cmbc">民生銀行卡</option><option value="spdb">浦發銀行卡</option><option value="cib">興業銀行卡</option><option value="ecitic">中信銀行卡</option></select></td>
					<td><div class="Validform_checktip">申購<b class="red">8</b>折</div></td>
				</tr>
				<tr>
					<td align="right">銀行卡號:</td>
					<td><input type="text" value="" name="e-card" class="input" /></td>
					<td><div class="Validform_checktip">請正確填寫銀行卡號,請注意區分16位/19位銀行卡號碼。</div></td>
				</tr>
				<tr>
					<td align="right">證件類型:</td><td><select name=""  class="select"><option>身份證</option><option>軍官證</option><option>駕使證</option></select></td><td></td>
				</tr>
				<tr>
					<td align="right">證件號碼:</td>
					<td><input type="text" value="" name="card" class="input" /></td>
					<td><div class="Validform_checktip">請正確填寫開卡證件號碼,請注意區分15位/18位身份證。</div></td>
				</tr>
				<tr>
					<td align="right">手機號碼:</td>
					<td><input type="text" value="" name="tel" class="input"  /></td>
					<td><div class="Validform_checktip">請輸入11位有效手機號碼。</div></td>
				</tr>
				<tr>
					<td></td><td colspan="2"><input type="submit" id="" class="nextbtn" value="下一步" /></td>
				</tr>
			</table>
			</form>
			<div class="tipbox">
				<dl>
					<dt>溫馨提示:</dt>
					<dd>1、支持全國范圍農行借記卡(必須是有CVD2碼的金穗卡),支持所有借記卡進行開戶、支持電子支付卡或網銀證書(K寶)進行交易、支持網銀證書(K寶)進行定投。
					<dd>2、農行卡網上交易沒有單筆交易金額限制和日交易金額限制。</dd>
					<dd>3、 持有效證件到農業銀行網點辦理一張借記卡;通過農行柜臺開通個人網上銀行業務或通過農行網站(www.abchina.com)申請電子支付卡。</dd>
					<dd>4、注意申請電子支付卡時,銀行的初始查詢密碼不能為相同的6位數或是身份證號碼中的連續6位數等簡單的號碼;申請和使用電子支付卡時,不受單筆1000元的交易金額的限制。</dd>
					<dd>5、請閱讀了解《國聯安基金投資人權益須知》</dd>
					<dd>6、如有疑問可咨詢國聯安基金客服中心(4008888688)或農業銀行客服中心(95599)。</dd>
				</dl>	
			</div>
		</div><!--bankcon end-->
		<div class="bankcon" style="display:none;">
			<form method="post" action="" class="cmbform">
			<table width="100%">
				<tr>
					<td width="110px" align="right">真實姓名:</td>
					<td width="160px"><input type="text" value="" name="name" class="input" /></td>
					<td><div class="Validform_checktip">銀行卡戶主身份信息必須與基金賬戶戶主身份信息相同!</div></td>
				</tr>
				<tr>
					<td align="right">銀行卡類型:</td><td><select name=""  class="select bankselect" disabled="disabled"><option value="icbc">工商銀行卡</option><option value="ccb">建設銀行卡</option><option value="abc">農業銀行卡</option><option value="cmb" selected="selected">招商銀行卡</option><option value="cmbc">民生銀行卡</option><option value="spdb">浦發銀行卡</option><option value="cib">興業銀行卡</option><option value="ecitic">中信銀行卡</option></select></td>
					<td><div class="Validform_checktip">申購<b class="red">8</b>折、定投<b class="red">8</b>折</div></td>
				</tr>
				<tr>
					<td align="right">銀行卡號:</td>
					<td><input type="text" value="" name="e-card" class="input" /></td>
					<td><div class="Validform_checktip">請正確填寫銀行卡號,請注意區分16位/19位銀行卡號碼。</div></td>
				</tr>
				<tr>
					<td align="right">證件類型:</td><td><select name=""  class="select"><option>身份證</option><option>軍官證</option><option>駕使證</option></select></td><td></td>
				</tr>
				<tr>
					<td align="right">證件號碼:</td>
					<td><input type="text" value="" name="card" class="input" /></td>
					<td><div class="Validform_checktip">請正確填寫開卡證件號碼,請注意區分15位/18位身份證。</div></td>
				</tr>
				<tr>
					<td align="right">手機號碼:</td>
					<td><input type="text" value="" name="tel" class="input" /></td>
					<td><div class="Validform_checktip">請輸入11位有效手機號碼。</div></td>
				</tr>
				<tr>
					<td></td><td colspan="2"><input type="submit" id="" class="nextbtn" value="下一步" /></td>
				</tr>
			</table>
			</form>
			<div class="tipbox">
				<dl>
					<dt>溫馨提示:</dt>
					<dd>1、支持全國范圍招行借記卡,支持所有借記卡進行開戶、交易和定投。</dd>
					<dd>2、招行卡網上交易單筆/單日劃款金額默認不超過20萬元;大眾版客戶可通過招商銀行自助查詢終端的“自助繳費”/“網上支付額度設置”功能,刷卡驗證密碼后將限額提升至50萬元/日;專業版客戶可通過招商銀行網上個人銀行(專業版)的“網上支付”——“自助繳費”功能頁面終將協議限額提升至100萬元/筆和200萬元/日。</dd>
					<dd>3、請下載并安裝“招行一卡通安全控件”, 點擊下載。</dd>
					<dd>4、請閱讀了解《國聯安基金投資人權益須知》</dd>
					<dd>5、如有疑問可咨詢國聯安基金客服中心(4008888688)或招商銀行客服中心(95555)。</dd>
				</dl>	
			</div>
		</div><!--bankcon end-->
	</div><!--bankbox end-->
</div><!--bankinfo end-->



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 導航切換 菜單切換 文本框 text文本框 單選框 單選按鈕
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子