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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
jQuery 版本的文本输入框检查器Input Check
Jul 09 Javascript
js 表格隔行颜色
Dec 02 Javascript
javascript版2048小游戏
Mar 18 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
基于Node的React图片上传组件实现实例代码
May 10 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
详解vue-cli3 中跨域解决方案
Apr 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桌面中心(一) 创建数据库
2007/03/11 PHP
php 动态添加记录
2009/03/10 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
php获取根域名方法汇总
2014/10/28 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
python对象及面向对象技术详解
2016/07/19 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
李宁官方网店:中国运动品牌
2017/11/02 全球购物
实习教师个人的自我评价
2013/11/08 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
探亲假请假条
2014/04/11 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
幼儿园感谢信
2015/01/21 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
mysql如何能有效防止删库跑路
2021/10/05 MySQL