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 相关文章推荐
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
jQuery之网页换肤实现代码
Apr 30 Javascript
Node.js中npm常用命令大全
Jun 09 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
Centos7 中 Node.js安装简单方法
Nov 02 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 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实现文件上传二法
2006/10/09 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
php基本函数汇总
2015/07/09 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
机电工程学生自荐信范文
2013/12/07 职场文书
手机促销活动方案
2014/02/05 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
敬老院活动感想
2015/08/07 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技