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 的 trim 函数的代码
Aug 13 Javascript
js用图作提交按钮或超连接
Mar 26 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 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
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
Python如何重新加载模块
2020/07/29 Python
python开发一款翻译工具
2020/10/10 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
全球性的女装店:storets
2019/06/12 全球购物
研发工程师的岗位职责
2013/11/18 职场文书
幼儿园保教管理制度
2014/02/03 职场文书
学校交通安全责任书
2014/08/25 职场文书
企业法人授权委托书
2014/09/25 职场文书
职工年度考核评语
2014/12/31 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android
Java 异步任务计算FutureTask
2022/04/28 Java/Android