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 相关文章推荐
jQuery选择器全面总结
Jan 06 Javascript
js控制input框只读实现示例
Jan 20 Javascript
一个JavaScript获取元素当前高度的实例
Oct 29 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
原生js编写焦点图效果
Dec 08 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
JavaScript canvas仿代码流瀑布
Feb 10 Javascript
用vue设计一个日历表
Dec 03 Vue.js
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之PHP语法学习笔记1
2006/12/17 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
yii2安装详细流程
2018/05/23 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
js闭包用法实例详解
2016/12/13 Javascript
js简易版购物车功能
2017/06/17 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
python3中str(字符串)的使用教程
2017/03/23 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
详解Python3中ceil()函数用法
2019/02/19 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
flask 实现token机制的示例代码
2019/11/07 Python
Python实现自动装机功能案例分析
2020/10/22 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
构造器Constructor是否可被override?
2013/08/06 面试题
技校个人求职信范文
2014/01/25 职场文书
小摄影师教学反思
2014/04/27 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书