快捷導(dǎo)航

Js切換功能的簡單方法

更新時間：2010年11月23日 21:52:35 作者：

很久以前還在學(xué)校的時候，在網(wǎng)上看到有的關(guān)于js切換的效果我自己會用很笨拙的方法試著寫出來

我估計很多正在學(xué)習(xí)css，js的朋友們也有這樣的經(jīng)歷，剛在做這個js切換的時候，我想到了一個好的方法，馬上給大家分享一下，希望你們能把它拿走

 
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也貼出來了，大家就看看吧，

復(fù)制代碼代碼如下:

 
<table width="100%" height="616" border="0" align="center" cellpadding="0" cellspacing="5" bgcolor="#FEFDF8" class="border1"> 
<tr> 
<td height="20" class="title2">會員注冊</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">會員名:</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個字符(包括小寫字母、數(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">請使用英文字母加數(shù)字或符號的組合密碼</div></td> 
</tr> 
<tr> 
<td align="right">確認密碼:</td> 
<td><asp:TextBox id="txt_pwd1" TextMode="Password" CssClass="txt" onfocus="changeDiv(2)" runat="server"/></td> 
<td><div id="dv_2" class="txt2">請重新輸入密碼</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">請輸入常用電子郵箱</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">請?zhí)顚懩腝Q/電話號</div></td> 
</tr> 
<tr> 
<td align="right">驗證碼:</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="點擊刷新驗證碼" align="absmiddle" /><div id="showErro" runat=server></div></td> 
<td><div id="dv_5" class="txt2">請輸入驗證碼</div></td> 
</tr> 
<tr> 
<td colspan="2" align="center"><INPUT type="checkbox" name="check_agreement"> 
<A href="#">我已閱讀并同意會員條款</A></td> 
<td align="center" valign="bottom"><asp:Button runat="server" ID="btn_register" OnClick="btn_Register_Click" onclientclick="return vipRegister()" Text="會員注冊"/></td> 
</tr> 
</table></td> 
</tr> 
</table> 