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代码
Mar 11 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
详解Node.js开发中的express-session
May 19 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
Vue slot用法(小结)
Oct 22 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 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使用pdo连接mssql server数据库实例
2014/12/25 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
如何在PHP中生成随机数
2020/06/04 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
用C++封装MySQL的API的教程
2015/05/06 Python
python自带的http模块详解
2016/11/06 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
python实现淘宝秒杀脚本
2020/06/23 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
简单的辞职信范文
2014/01/18 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
个人借款协议书范本
2014/11/17 职场文书
老龙头导游词
2015/02/11 职场文书
先进个人总结范文
2015/02/15 职场文书
自主招生自荐信格式
2015/03/04 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server
基于Python实现西西成语接龙小助手
2022/08/05 Golang