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的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
JS数据类型判断的几种常用方法
Jul 07 Javascript
微信小程序实现选项卡滑动切换
Oct 22 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中str_replace函数使用小结
2008/10/11 PHP
PHP 截取字符串专题集合
2010/08/19 PHP
php密码生成类实例
2014/09/24 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
模拟select的代码
2011/10/19 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Python3 批量扫描端口的例子
2019/07/25 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
Python如何输出整数
2020/06/07 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
电大毕业个人生自我鉴定
2014/03/26 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
节约用水的口号
2014/06/20 职场文书
公司演讲稿开场白
2014/08/25 职场文书
人生遥控器观后感
2015/06/11 职场文书
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python
asyncio异步编程之Task对象详解
2022/03/13 Python