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实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
JS代码优化技巧之通俗版(减少js体积)
Dec 23 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
了解JavaScript表单操作和表单域
May 27 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+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
Python备份Mysql脚本
2008/08/11 Python
Python将xml和xsl转换为html的方法
2015/03/10 Python
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
python输出决策树图形的例子
2019/08/09 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
简单了解python元组tuple相关原理
2019/12/02 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
Python中的Cookie模块如何使用
2020/06/04 Python
python包的导入方式总结
2021/03/02 Python
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
工作会议欢迎词
2014/01/16 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS