javascript实现的多个层切换效果通用函数实例


Posted in Javascript onJuly 06, 2015

本文实例讲述了javascript实现的多个层切换效果通用函数。分享给大家供大家参考。具体实现方法如下:

function ChangeDiv(tagId,tagName,divId,divName,zDivCount,tagclass,divclass) {
for(i=0;i<=zDivCount;i++) {
document.getElementById(divName+i).style.display="none";
document.getElementById(divName+i).className='';
document.getElementById(tagName+i).className='';
}
document.getElementById(divName+divId).style.display="block";
document.getElementById(tagName+tagId).className=tagclass;
document.getElementById(divName+divId).className=divclass;
}

tagId,tagName为鼠标单击的控制层的id和名称 divId,divName为被控制要显示和隐藏的层的id和名称 zDivCount为显示和隐藏的层的个数-1(如果是5个层则为4)

tagclass,divclass分别为控制层的样式 和被控制层的样式

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
vue router 组件的高级应用实例代码
Apr 08 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
iview实现动态表单和自定义验证时间段重叠
Jan 10 Javascript
动态规划之使用备忘录来改进Javascript函数
Apr 07 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 #Javascript
Jsonp post 跨域方案
Jul 06 #Javascript
javascript运动详解
Jul 06 #Javascript
浅谈jQuery中height与width
Jul 06 #Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 #Javascript
浅谈Javascript实现继承的方法
Jul 06 #Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 #Javascript
You might like
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
Js面试算法详解
2018/04/08 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
Python高效编程技巧
2013/01/07 Python
python多线程http下载实现示例
2013/12/30 Python
Python算术运算符实例详解
2017/05/31 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
python pyheatmap包绘制热力图
2018/11/09 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
python中return不返回值的问题解析
2020/07/22 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
远程研修随笔感言
2014/02/10 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
档案管理员岗位职责
2015/02/12 职场文书
2015年团支部工作总结
2015/04/03 职场文书
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript