Js切换功能的简单方法


Posted in Javascript onNovember 23, 2010

我估计很多正在学习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 相关文章推荐
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
javascript中文本框中输入法切换的问题
Dec 10 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 Javascript
Vue退出登录时清空缓存的实现
Nov 12 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
validator验证控件使用代码
Nov 23 #Javascript
GreyBox技术总结(转)
Nov 23 #Javascript
Js基础学习资料
Nov 23 #Javascript
JavaScript 程序编码规范
Nov 23 #Javascript
javascript整除实现代码
Nov 23 #Javascript
flexigrid 参数说明
Nov 23 #Javascript
js 判断checkbox是否选中的实现代码
Nov 23 #Javascript
You might like
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
对联广告js flash激活
2006/10/19 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
python中ConfigParse模块的用法
2014/09/29 Python
python读取二进制mnist实例详解
2017/05/31 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
syb养殖创业计划书
2014/01/09 职场文书
运动会跳远广播稿
2014/02/04 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL
数据设计之权限的实现
2022/08/05 MySQL