用闭包实现含有定时器的tab栏的切换与函数封装
2016-01-01 15:40
399 查看
css 结构:
/* 用通配符清除默认样式减少代码量,实际项目应对用到的标签清除默认样式*/ *{margin: 0;padding: 0;list-style: none;outline: none;} /* 注意这里.tab设置宽度布局的精妙*/ .tab{width: 398px;height: 200px;border: 1px solid #ddd;margin: 100px auto 0;font-family: 'arial';} .hd{background: #f7f7f7;height: 30px;line-height: 30px;text-align: center;} .hd ul{width: 400px;margin-left: -1px;} .hd li{float: left;width: 98px;padding: 0 1px;border-bottom: 1px solid #ddd;} .hd li.cur{background: #fff;border-bottom-color: transparent;border-left: 1px solid #ddd;border-right: 1px solid #ddd;padding: 0;} .hd li.cur a{font-size: 14px;font-weight: 600;color: #f40;} /* 下面对a的display:block是去除li里面的1px的空白间隙 */ .hd li a{text-decoration: none;color: #666;font-size: 12px;display: block;} .hd a:hover{text-decoration: none;} .bd{position: relative;} .bd li{text-indent: 2em;line-height: 80px;height: 269px;position: absolute;top: 0;left: 0;width: 100%;display: none;} .bd li.cur{display: block;}html 结构:
<div class="tab" id='tab'> <div class="hd"> <ul> <li><a href="javascript:;">栏目1</a></li> <li><a href="javascript:;">栏目2</a></li> <li><a href="javascript:;">栏目3</a></li> <li><a href="javascript:;">栏目4</a></li> </ul> </div> <div class="bd"> <ul> <li>这是栏目1区域内容</li> <li>这是栏目2区域内容</li> <li>这是栏目3区域内容</li> <li>这是栏目4区域内容</li> </ul> </div> </div>javascript 结构:
tab('tab'); // 调用函数 function tab(obj) { var tab = document.getElementById(obj); var hdlis = tab.children[0].getElementsByTagName('li'); var bdlis = tab.children[1].getElementsByTagName('li'); var l = hdlis.length; hdlis[0].className = 'cur'; bdlis[0].className = 'cur'; tab.timer = null; for(var i = 0; i < l; i ++) { // 闭包的用法 hdlis[i].onmouseenter = function (index) { return function () { clearTimeout(tab.timer); tab.timer = setTimeout(function () { for(var i = 0; i < l; i ++) { hdlis[i].className = ''; bdlis[i].className = ''; } hdlis[index].className = 'cur'; bdlis[index].className = 'cur'; },300); } }(i); /* 下面的index 和 i 两个参数可以不要 */ hdlis[i].onmouseleave = function (index) { return function () { clearTimeout(tab.timer); // console.log(index); // 这里仅供测试闭包 } }(i); } }
相关文章推荐
- 学习远控界面设计一: 程序界面大小
- samba搭建
- 重装系统后必装软件
- java中的this关键字
- 每天一个Linux之locate命令
- map中使用自定义类指针作为key
- WIN32服务程序(二):卸载服务
- dns搭建
- java socket 编程
- Android Studio安装、配置
- Linux下rsync增加SSH端口号的用法
- JavaScript(1)
- lnmp搭建
- 大数据学习之路
- 数据库之运算符和函数
- 面向对象设计原则
- JAVA图形界面(GUI)之布局管理器
- [从头学数学] 第20节 100以内的加法和减法(二)
- codevs 1028 花店橱窗布置
- ECharts 学习笔记(1)-HelloWorld