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 相关文章推荐
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
js调用AJAX时Get和post的乱码解决方法
Jun 04 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
JS实现方形抽奖效果
Aug 27 Javascript
基于JS实现前端压缩上传图片的实例代码
May 14 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
JS实现容器模块左右拖动效果
Jan 14 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 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
PHP 9 大缓存技术总结
2015/09/17 PHP
深入php内核之php in array
2015/11/10 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
取得传值的函数
2006/10/27 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
Python编写百度贴吧的简单爬虫
2015/04/02 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
python线程、进程和协程详解
2016/07/19 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
将python图片转为二进制文本的实例
2019/01/24 Python
python3使用matplotlib绘制散点图
2019/03/19 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
动态密码技术
2012/10/18 面试题
爷爷追悼会答谢词
2014/01/24 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers