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 相关文章推荐
用JavaScript隐藏控件的方法
Sep 21 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 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
如何对PHP程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
第九节--绑定
2006/11/16 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
javascript整除实现代码
2010/11/23 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
Python常用内置函数总结
2015/02/08 Python
pycharm安装图文教程
2017/05/02 Python
python操作excel的方法
2018/08/16 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
Django模板语言 Tags使用详解
2019/09/09 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
python中的对数log函数表示及用法
2020/12/09 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
仓库保管员岗位职责
2013/12/20 职场文书
一名老师的自我评价
2014/02/07 职场文书
学习十八大宣传标语
2014/10/09 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android