Js切換功能的簡(jiǎn)單方法
更新時(shí)間:2010年11月23日 21:52:35 作者:
很久以前還在學(xué)校的時(shí)候,在網(wǎng)上看到有的關(guān)于js切換的效果我自己會(huì)用 很笨拙的方法試著寫(xiě)出來(lái)
我估計(jì)很多正在學(xué)習(xí)css,js的朋友們也有這樣的經(jīng)歷,剛在做這個(gè)js切換的時(shí)候,我想到了一個(gè)好的方法,馬上給大家分享一下,希望你們能把它拿走
function changeDiv(index)
{
for(var i=0;i<=5;i++)
{
if(i == index)
document.getElementById('dv_'+i).className="txt1";
else
document.getElementById('dv_'+i).className="txt2";
}
}
可樣子大家可能看的不是很清楚,這樣 吧,我把html也貼出來(lái)了,大家就看看吧,
<table width="100%" height="616" border="0" align="center" cellpadding="0" cellspacing="5" bgcolor="#FEFDF8" class="border1">
<tr>
<td height="20" class="title2">會(huì)員注冊(cè)</td>
</tr>
<tr>
<td valign="top" bgcolor="#FEFDF8">
<table height="20"><tr><td></td></tr></table>
<table width="100%" height="300" border="0" cellpadding="0" cellspacing="10">
<tr>
<td width="100" align="right">會(huì)員名:</td>
<td><asp:TextBox CssClass="txt" id="txt_name" onfocus="changeDiv(0)" onblur="cheaked();check_callback()" runat="server"/><div id="showState"></div></td>
<td><div id="dv_0" class="txt2">5-20個(gè)字符(包括小寫(xiě)字母、數(shù)字、下劃線、中文)</div></td>
</tr>
<tr>
<td align="right">密碼:</td>
<td><asp:TextBox id="txt_pwd" TextMode="Password" CssClass="txt" onfocus="changeDiv(1)" runat="server"/></td>
<td><div id="dv_1" class="txt2">請(qǐng)使用英文字母加數(shù)字或符號(hào)的組合密碼</div></td>
</tr>
<tr>
<td align="right">確認(rèn)密碼:</td>
<td><asp:TextBox id="txt_pwd1" TextMode="Password" CssClass="txt" onfocus="changeDiv(2)" runat="server"/></td>
<td><div id="dv_2" class="txt2">請(qǐng)重新輸入密碼</div></td>
</tr>
<tr>
<td align="right">電子郵箱:</td>
<td><asp:TextBox id="txt_mail" CssClass="txt" onfocus="changeDiv(3)" runat="server"/></td>
<td><div id="dv_3" class="txt2">請(qǐng)輸入常用電子郵箱</div></td>
</tr>
<tr>
<td align="right">QQ/電話:</td>
<td><asp:TextBox id="txt_tel" CssClass="txt" onfocus="changeDiv(4)" runat="server"/></td>
<td><div id="dv_4" class="txt2">請(qǐng)?zhí)顚?xiě)您的QQ/電話號(hào)</div></td>
</tr>
<tr>
<td align="right">驗(yàn)證碼:</td>
<td><asp:TextBox id="txt_vali" CssClass="txt" Width="150" onfocus="changeDiv(5)" runat="server"/><img id="vcodeimg" style="cursor:hand" src="tools/verifyimage.aspx" onClick="this.src= http://www.dftzc.com " title="點(diǎn)擊刷新驗(yàn)證碼" align="absmiddle" /><div id="showErro" runat=server></div></td>
<td><div id="dv_5" class="txt2">請(qǐng)輸入驗(yàn)證碼</div></td>
</tr>
<tr>
<td colspan="2" align="center"><INPUT type="checkbox" name="check_agreement">
<A href="#">我已閱讀并同意會(huì)員條款</A></td>
<td align="center" valign="bottom"><asp:Button runat="server" ID="btn_register" OnClick="btn_Register_Click" onclientclick="return vipRegister()" Text="會(huì)員注冊(cè)"/></td>
</tr>
</table></td>
</tr>
</table>
復(fù)制代碼 代碼如下:
function changeDiv(index)
{
for(var i=0;i<=5;i++)
{
if(i == index)
document.getElementById('dv_'+i).className="txt1";
else
document.getElementById('dv_'+i).className="txt2";
}
}
可樣子大家可能看的不是很清楚,這樣 吧,我把html也貼出來(lái)了,大家就看看吧,
復(fù)制代碼 代碼如下:
<table width="100%" height="616" border="0" align="center" cellpadding="0" cellspacing="5" bgcolor="#FEFDF8" class="border1">
<tr>
<td height="20" class="title2">會(huì)員注冊(cè)</td>
</tr>
<tr>
<td valign="top" bgcolor="#FEFDF8">
<table height="20"><tr><td></td></tr></table>
<table width="100%" height="300" border="0" cellpadding="0" cellspacing="10">
<tr>
<td width="100" align="right">會(huì)員名:</td>
<td><asp:TextBox CssClass="txt" id="txt_name" onfocus="changeDiv(0)" onblur="cheaked();check_callback()" runat="server"/><div id="showState"></div></td>
<td><div id="dv_0" class="txt2">5-20個(gè)字符(包括小寫(xiě)字母、數(shù)字、下劃線、中文)</div></td>
</tr>
<tr>
<td align="right">密碼:</td>
<td><asp:TextBox id="txt_pwd" TextMode="Password" CssClass="txt" onfocus="changeDiv(1)" runat="server"/></td>
<td><div id="dv_1" class="txt2">請(qǐng)使用英文字母加數(shù)字或符號(hào)的組合密碼</div></td>
</tr>
<tr>
<td align="right">確認(rèn)密碼:</td>
<td><asp:TextBox id="txt_pwd1" TextMode="Password" CssClass="txt" onfocus="changeDiv(2)" runat="server"/></td>
<td><div id="dv_2" class="txt2">請(qǐng)重新輸入密碼</div></td>
</tr>
<tr>
<td align="right">電子郵箱:</td>
<td><asp:TextBox id="txt_mail" CssClass="txt" onfocus="changeDiv(3)" runat="server"/></td>
<td><div id="dv_3" class="txt2">請(qǐng)輸入常用電子郵箱</div></td>
</tr>
<tr>
<td align="right">QQ/電話:</td>
<td><asp:TextBox id="txt_tel" CssClass="txt" onfocus="changeDiv(4)" runat="server"/></td>
<td><div id="dv_4" class="txt2">請(qǐng)?zhí)顚?xiě)您的QQ/電話號(hào)</div></td>
</tr>
<tr>
<td align="right">驗(yàn)證碼:</td>
<td><asp:TextBox id="txt_vali" CssClass="txt" Width="150" onfocus="changeDiv(5)" runat="server"/><img id="vcodeimg" style="cursor:hand" src="tools/verifyimage.aspx" onClick="this.src= http://www.dftzc.com " title="點(diǎn)擊刷新驗(yàn)證碼" align="absmiddle" /><div id="showErro" runat=server></div></td>
<td><div id="dv_5" class="txt2">請(qǐng)輸入驗(yàn)證碼</div></td>
</tr>
<tr>
<td colspan="2" align="center"><INPUT type="checkbox" name="check_agreement">
<A href="#">我已閱讀并同意會(huì)員條款</A></td>
<td align="center" valign="bottom"><asp:Button runat="server" ID="btn_register" OnClick="btn_Register_Click" onclientclick="return vipRegister()" Text="會(huì)員注冊(cè)"/></td>
</tr>
</table></td>
</tr>
</table>
您可能感興趣的文章:
- js實(shí)現(xiàn)網(wǎng)頁(yè)隨機(jī)切換背景圖片的方法
- 網(wǎng)站繁簡(jiǎn)切換的JS遇到頁(yè)面卡死的解決方法
- JS圖片切換的具體方法(帶縮略圖版)
- jQuery圖片切換插件jquery.cycle.js使用示例
- js、jquery圖片動(dòng)畫(huà)、動(dòng)態(tài)切換示例代碼
- 用html+css+js實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的圖片切換特效
- js(JavaScript)實(shí)現(xiàn)TAB標(biāo)簽切換效果的簡(jiǎn)單實(shí)例
- js實(shí)現(xiàn)div的切換特效上一個(gè)下一個(gè)
- js動(dòng)態(tài)切換圖片的方法
相關(guān)文章
原生JS實(shí)現(xiàn)鼠標(biāo)滑動(dòng)撒愛(ài)心特效
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)鼠標(biāo)滑動(dòng)撒愛(ài)心特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10JS實(shí)現(xiàn)橫向拉伸動(dòng)感伸縮菜單效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)橫向拉伸動(dòng)感伸縮菜單效果,涉及javascript基于定時(shí)函數(shù)及鼠標(biāo)事件操作頁(yè)面元素動(dòng)態(tài)變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09ClearTimeout消除閃動(dòng)實(shí)例代碼
本文給大家介紹ClearTimeout消除閃動(dòng)相關(guān)知識(shí),本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-02-02JavaScript數(shù)組對(duì)象實(shí)現(xiàn)增加一個(gè)返回隨機(jī)元素的方法
這篇文章主要介紹了JavaScript數(shù)組對(duì)象實(shí)現(xiàn)增加一個(gè)返回隨機(jī)元素的方法,涉及javascript針對(duì)數(shù)組及隨機(jī)數(shù)的相關(guān)操作技巧,需要的朋友可以參考下2015-07-07分享十三個(gè)最佳JavaScript數(shù)據(jù)網(wǎng)格庫(kù)
數(shù)據(jù)網(wǎng)格可以幫助解決在 HTML 表格上對(duì)帶有過(guò)濾、分頁(yè)、排序、搜索以及內(nèi)聯(lián)編輯這些功能特性的大量數(shù)據(jù)集的處理問(wèn)題,需要的朋友可以參考下2017-04-04javascript中的undefined 與 null 的區(qū)別 補(bǔ)充篇
在Javascript中有兩個(gè)值用來(lái)代表類(lèi)似空值的概念,undefined和null,這兩個(gè)很容易被混淆,他們表示的是兩個(gè)不同的概念。2010-03-03JavaScript基于SVG的圖片切換效果實(shí)例代碼
這篇文章主要介紹了JavaScript基于SVG的圖片切換效果實(shí)例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12