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获取用户本地图片路径并显示的代码
Feb 16 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
JavaScript实现Iterator模式实例分析
Jun 09 Javascript
JavaScript中的this到底是什么(一)
Dec 09 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
JS实现520 表白简单代码
May 21 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
重置Redux的状态数据的方法实现
Nov 18 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 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
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
实例讲解python函数式编程
2014/06/09 Python
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
python sqlite的Row对象操作示例
2019/09/11 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
护士自荐信
2013/10/25 职场文书
营销与策划应届生求职信
2013/11/04 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
2014年保密工作总结
2014/11/22 职场文书
布达拉宫导游词
2015/02/02 职场文书
特此通知格式
2015/04/27 职场文书
党委工作总结2015
2015/04/27 职场文书
党员承诺书范文2015
2015/04/27 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
解除合同协议书范本
2016/03/21 职场文书
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang