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 相关文章推荐
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
js分页代码分享
Apr 28 Javascript
浅谈JavaScript字符集
May 22 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
BootStrap中
Dec 10 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 Javascript
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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
PHP调试函数和日志记录函数分享
2015/01/31 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
JavaScript中的数组操作介绍
2014/12/30 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
意大利奢侈品网站:Italist
2016/08/23 全球购物
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
网络体系结构及协议的定义
2014/03/13 面试题
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
小学教师师德师风演讲稿
2014/08/22 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
解除租房协议书
2014/12/03 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书