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 自定义类型方法小结
Mar 02 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
js实现右键菜单功能
Nov 28 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 Javascript
Vue获取微博授权URL代码实例
Nov 04 Javascript
vue 实现弹窗关闭后刷新效果
Apr 08 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
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
一些不错的js函数ajax
2008/08/20 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
《海伦?凯勒》教学反思
2014/04/17 职场文书
高中班级口号
2014/06/09 职场文书
优质服务口号
2014/06/11 职场文书
个人简历自荐信
2014/06/26 职场文书
公司给客户的感谢信
2015/01/23 职场文书
辞职信怎么写
2015/02/27 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
公司人事管理制度
2015/08/05 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
《窃读记》教学反思
2016/02/18 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL