Js切换功能的简单方法

 更新时间:2010年11月23日 21:52:35   作者:  
很久以前还在学校的时候,在网上看到有的关于js切换的效果我自己会用 很笨拙的方法试着写出来
我估计很多正在学习css,js的朋友们也有这样的经历,刚在做这个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也贴出来了,大家就看看吧,
复制代码 代码如下:

<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个字符(包括小写字母、数字、下划线、中文)</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">请使用英文字母加数字或符号的组合密码</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">请填写您的QQ/电话号</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>

相关文章

  • javaScript中FormData使用方法示例

    javaScript中FormData使用方法示例

    这篇文章主要为大家介绍了javaScript中FormData使用方法示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • javascript轮播图算法

    javascript轮播图算法

    这篇文章主要为大家详细介绍了javascript轮播图算法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • javascript数字格式化通用类 accounting.js使用

    javascript数字格式化通用类 accounting.js使用

    accounting.js 是一个非常小的JavaScript方法库用于对数字,金额和货币进行格式化。并提供可选的Excel风格列渲染。它没有依赖任何JS框架。货币符号等可以按需求进行定制
    2012-08-08
  • 通过javascript获取iframe里的值示例代码

    通过javascript获取iframe里的值示例代码

    iframe里的值在实现一些比较特殊功能时需要获取的,下面为大家详细介绍下使用javascript获取iframe里值的方法,感兴趣的各位可以参考下哈
    2013-06-06
  • 微信小程序利用云函数获取手机号码

    微信小程序利用云函数获取手机号码

    这篇文章主要介绍了微信小程序利用云函数获取手机号码功能,本文通过实例代码给大家讲解的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • NestJs使用Mongoose对MongoDB操作的方法

    NestJs使用Mongoose对MongoDB操作的方法

    这篇文章主要介绍了NestJs使用Mongoose对MongoDB操作的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • JavaScript的removeChild()函数用法详解

    JavaScript的removeChild()函数用法详解

    removechild 函数可以删除父元素的指定子元素,通过本文给大家介绍javascript的removeChild()函数用法,对js removechild函数相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • JS及PHP代码编写八大排序算法

    JS及PHP代码编写八大排序算法

    这篇文章主要为大家详细介绍了JS及PHP代码编写八大排序算法的相关资料,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 得到当前行的值的javascript代码

    得到当前行的值的javascript代码

    得到当前行的值的javascript代码...
    2007-06-06
  • js实现前端图片上传即时预览功能

    js实现前端图片上传即时预览功能

    这篇文章主要为大家详细介绍了js实现前端图片即时预览功能,本地预览功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08

最新评论