含有定时器的tab栏的切换与函数封装
来源:互联网 发布:实况足球2016捏脸数据 编辑:程序博客网 时间:2024/06/02 05:39
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].index = i; hdlis[i].onmouseenter = function () { var that = this; // 将当前对象存储起来 防止定时器改变this指针 clearTimeout(tab.timer); tab.timer = setTimeout(function () { for(var i = 0; i < l; i ++) { hdlis[i].className = ''; bdlis[i].className = ''; } that.className = 'cur'; bdlis[that.index].className = 'cur'; },300); } hdlis[i].onmouseleave = function () { clearTimeout(tab.timer); } }}
0 0
- 含有定时器的tab栏的切换与函数封装
- 用闭包实现含有定时器的tab栏的切换与函数封装
- 普通的tab栏的切换与函数封装
- 一个简单的原生js封装tab切换函数
- jquery封装简单的tab切换
- 使用定时器执行含有参数的函数
- 实用简洁的TAB切换函数
- tab栏的切换效果
- js第九节-定时器的管理,函数封装
- 漂亮的tab切换
- Tab页的切换
- 自定义的tab切换
- jq的tab切换
- JS实现tab栏的切换
- 封装的定时器类
- 封装的定时器类
- 定时器类的封装
- 学习笔记:基于jquery的tab切换函数
- javascript 学习一:js语法基础
- python之类之select
- 浅谈Erlang中最常用的编程模式--递归调用
- UVA1008 Piotr's Ants
- Java压缩JS、CSS并合并,网上收集汇总
- 含有定时器的tab栏的切换与函数封装
- String转换为boolean的三种方法
- 使用CocoaPods安装GoogleMaps库后出现的问题及解决
- 此账户无法使用谷歌即时 最简单的使用Google Now方法
- Two Sum II - Input array is sorted
- 编译php系统的一个小问题
- 微软 Hololens 技术解谜(上):如何还原三维场景
- AVL树--C语言实现
- 对于PCA人脸识别过程的理解