首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

分步解析JavaScript实现tab选项卡自动切换功能

Posted in Javascript onJanuary 25, 2016

本文分享一个能够实现自动切换的选项卡功能，并给出它的具体实现过程。

关于选项卡大家一定不会陌生，应用非常的频繁，通常选项卡都是需要点击或者划过才能够实现切换。
代码实例如下:

<html>
<head>
<meta charset=" utf-8">
<title>tab切换</title>
<style type="text/css">
body,h2,p{
 margin:0px;
 padding:0px;
}ul,li{
 margin:0px;
 padding:0px;
 float:left;
 list-style-type:none;
 }
body{font-size:12px;}
.box{
 width:722px;
 height:99px;
 margin:10px auto;
 border:1px solid #dedede;
}
.list{
 width:711px;
 height:22px;
 float:left;
 padding:4px 0 0 9px;
 border-top:1px solid #fff;
 border-left:1px solid #fff;
 border-right:1px solid #fff;
}
.list li{
 width:74px;
 height:22px;
 float:left;
 cursor:pointer;
 color:#656565;
 line-height:22px;
 text-align:center;
}
.list li.hove{
 width:72px;
 height:20px;
 color:#fc6703;
 line-height:20px;
 border-top:1px solid #dedede;
 border-left:1px solid #dedede;
 border-right:1px solid #dedede;
 border-bottom:1px solid #fff;
 background:#fff;
}
.content{
 width:722px;
 height:72px;
 float:left;
 display:none;
}
</style>
<script>
function $(id){
 return typeof id === "string" ? document.getElementById(id) : id;
}
 
function $$(oParent, elem){
 return (oParent || document).getElementsByTagName(elem);
}
 
function $$$(oParent, sClass){
 var aElem = $$(oParent, '*');
 var aClass = [];
 var index = 0;
 for(index=0;index<aElem.length;index++){
 if(aElem[index].className == sClass){
  aClass.push(aElem[index]);
 }
 }
 return aClass;
}
 
function addEvent(oElm, strEvent, fuc) {
 addEventListener?oElm.addEventListener(strEvent,fuc,false):oElm.attachEvent('on'+strEvent,fuc);
};
function Tab(){
 this.initialize.apply(this, arguments);
}
 
 
Object.extend = function(destination, source) {
 for (var property in source) {
 destination[property] = source[property];
 }
 return destination;
};
 
Tab.prototype = {
 initialize : function(obj, dis, content, onEnd, eq){
 this.obj = $(obj);
 this.oList = $$$(this.obj, 'list')[0];
 this.aCont = $$$(this.obj, content);
 this.oUl = $$(this.oList, 'ul')[0];
 this.aLi = this.oUl.children;
 this.timer = null;
 eq ? (this.aLi.length < eq ? eq = 0 : eq) : eq = 0;
 this.oEve(onEnd);
 this.onEnd.method == 'mouseover' ? this.method = "mouseover" : this.method = "click";
 this.onEnd.autoplay == 'stop' ? this.autoplay = "stop" : this.autoplay = "play";
 this.aCont[eq].style.display = 'block';
 this.aLi[eq].className = 'hove';
 this.display(dis);
 this.autoPlayTab(eq, dis);
 },
 oEve: function(onEnd){
 this.onEnd = {
  method: 'mouseover',
  autoplay: 'stop',
 };
 Object.extend(this.onEnd, onEnd || {});
 },
 display : function(dis){
 var _this = this;
 var index = iNow = 0;
 for(index=0;index<_this.aLi.length;index++){
  (function(){
  var j = index;
  addEvent(_this.aLi[j], _this.method,
  function() {
   _this.fnClick(j,dis);
   _this.autoPlayTab(j, dis);
  })
  })()
 }
 },
 autoPlayTab : function(iNow, dis){
 if(this.autoplay == 'play'){
  var _this = this;
  this.iNow = iNow;
  this.obj.onmouseover = function(){
  clearInterval(_this.timer);
  };
  this.obj.onmouseout = function(){
  _this.timer = setInterval(playTab,5000);
  };
  clearInterval(_this.timer);
  _this.timer = setInterval(playTab,5000);
  function playTab(){
  if(_this.iNow == _this.aLi.length)_this.iNow = 0;
  _this.fnClick(_this.iNow, dis)
  _this.iNow++
  }
 }
 },
 fnClick : function(oBtn, dis){
 var index = 0;
 for(index=0;index<this.aLi.length;index++){
  this.aLi[index].className = '';
  this.aCont[index].style.display = 'none';
 }
 this.aLi[oBtn].className = dis;
 this.aCont[oBtn].style.display = 'block';
 }
};
window.onload = function(){
 new Tab("box", 'hove', 'content', {
 method : 'mouseover',
 autoplay : 'play'
 },0);
};
</script>
</head>
<body>
<div id="box" class="box">
 <div class="list">
 <ul>
  <li>div教程</li>
  <li>jquery教程</li>
  <li>css教程</li>
 </ul>
 </div>
 <div class="content">蚂蚁部落欢迎您</div>
 <div class="content">本站url地址是softwhy.com</div>
 <div class="content">只有努力才会有美好的未来</div>
</div>
</body>
</html>

上面的代码实现了我们的要求，下面介绍一下它的实现过程。
（1）模拟实现jQuery中的id选择器，参数是元素的id属性值

function $(id){
return typeof id === "string" ? document.getElementById(id) : id;
}

（2）.function $$(oParent, elem){
  return (oParent || document).getElementsByTagName(elem);
}，此函数实现了后去指定元素下所有特定元素的对象集合。
（3）.此函数的功能是将oParent元素下所有class属性值为sClass的元素存入数组

function $$$(oParent, sClass){
 var aElem = $$(oParent, '*');
 var aClass = [];
 var index = 0;
 for(index=0;index<aElem.length;index++){
  if(aElem[index].className == sClass){
   aClass.push(aElem[index]);
  }
 }
 return aClass;
}

（4）事件处理函数的绑定封装，实现了浏览器兼容功能。

.function addEvent(oElm, strEvent, fuc) {
 addEventListener?oElm.addEventListener(strEvent,fuc,false) : oElm.attachEvent('on'+strEvent,fuc);
}

（5）.此方法实现了基本的初始化操作

function Tab(){ this.initialize.apply(this, arguments);
}

（6）.实现了合并对象的功能，比如可以将对象a中的属性合并到对象b中

Object.extend = function(destination, source) {
 for (var property in source) {
  destination[property] = source[property];
 }
 return destination;
}

（7）.Tab.prototype = {}，设置Tab构造函数的原型对象。
（8）.initialize : function(obj, dis, content, onEnd, eq){}，此方法可以进行一些初始化操作。第一个参数是元素id属性值，第二个参数是class样式类，第三个参数是内容div的class样式类名称，第四个参数是一个对象直接量，里面存储了一些相关参数，第五个参数规定默认哪个选项卡被选中，是一个数字。
（9）.this.obj = $(obj)，获取指定的元素对象。
（10）.this.oList = $$$(this.obj, 'list')[0]，获取class属性值为list的标题外层div元素。
（11）.this.aCont = $$$(this.obj, content)，获取选项卡内容元素集合。
（12）.this.oUl = $$(this.oList, 'ul')[0]，获取标题ul元素。
（13）.this.aLi = this.oUl.children，获取ul元素下的所有子元素。
（14）.this.timer = null，用作定时器函数的标识。
（15）.eq ? (this.aLi.length < eq ? eq = 0 : eq) : eq = 0，如果eq是0则使用0，否则的话将使用eq传递的值，eq值要小于数组长度，否则eq值设置为0。
（16）.this.oEve(onEnd)，覆盖默认设置。
（17）.this.onEnd.method == 'mouseover' ? this.method = "mouseover" : this.method = "click"，判断是mouseover事件还是click事件。
（18）.this.onEnd.autoplay == 'stop' ? this.autoplay = "stop" : this.autoplay = "play"，默认是自动播放，否则就不是自动播放。
（19）.this.aCont[eq].style.display = 'block'，默认内容项显示。
（20）.this.aLi[eq].className = 'hove'，设置对应的标题选项卡样式。
（21）.this.display(dis)，注册事件处理函数，参数是一个样式类名称。
（22）.this.autoPlayTab(eq, dis)，执行此函数确保在允许自动切换的时候选项卡可以自动切换。
（23）.

用来进行对象合并

oEve: function(onEnd){
 this.onEnd = {
  method: 'mouseover',
  autoplay: 'stop',
 };
 Object.extend(this.onEnd, onEnd || {});
}

这是默认的设置

this.onEnd = {
 method: 'mouseover',
 autoplay: 'stop',
}

如果传递了onend对象，就将其合并到默认对象，否则合并一个空对象

Object.extend(this.onEnd, onEnd || {})

（24）.display : function(dis){}，注册事件处理函数，参数是一个样式类名称。
（25）.var _this = this，将this赋值给变量_this,为什么这么做后面会介绍。（26）.var index = iNow = 0，进行一些初始化操作。
（27）.for(index=0;index<_this.aLi.length;index++){}，通过for循环遍历的方式注册事件处理函数。
（28）

.(function(){ var j = index;
 addEvent(_this.aLi[j], _this.method,
 function() {
  _this.fnClick(j,dis);
  _this.autoPlayTab(j, dis);
 })
})()

使用匿名自执行函数，其实就是形成了一个闭包。
之所以用闭包，是为了隔离匿名函数内部的index值和外部的index值。
之所以将this赋值给_this是因为，事件处理函数中的this是指向元素li的，而不是指向Tab()构造函数的对象实例。
（29）.autoPlayTab : function(iNow, dis){}，此函数实现了自动切换功能，第一个参数规定当前选项卡切换所处的索引位置，第二个参数一个样式类名称，就是设置处于当前状态的样式。
（30）.if(this.autoplay == 'play'){}，判断是否允许自动切换。
（31）.var _this = this,将this赋值给变量_this，原理和上面是一样的。
（32）.this.iNow = iNow，进行赋值操作。
（33）.this.obj.onmouseover = function(){
  clearInterval(_this.timer);
}，当鼠标悬浮的时候的时候停止定时器函数的执行，其实也就是停止自动切换。

（34）.当鼠标离开的时候，开始自动切换动作

this.obj.onmouseout = function(){
 _this.timer = setInterval(playTab,5000);
}

（35）.clearInterval(_this.timer)，停止以前的定时器函数执行。
（36）._this.timer = setInterval(playTab,5000)，开始自动切换。
（37）.

function playTab(){
 if(_this.iNow == _this.aLi.length)_this.iNow = 0;
 _this.fnClick(_this.iNow, dis)
  _this.iNow++

}

不断调用此函数就实现了自动切换功能。
如果当前的索引等于li元素的个数，那么就将其设置为0，也就是从头进行新一轮切换。
然后调用对应的方法，并且让索引值自增。

（38）实现了选项卡的切换显示隐藏和样式设置效果

.fnClick : function(oBtn, dis){
  var index = 0;
  for(index=0;index<this.aLi.length;index++){
   this.aLi[index].className = '';
   this.aCont[index].style.display = 'none';
  }
  this.aLi[oBtn].className = dis;
  this.aCont[oBtn].style.display = 'block';
 }

以上就是本文的全部内容，希望对大家的学习有所帮助。

分步解析JavaScript实现tab选项卡自动切换功能

- Author -

gogoggo

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
JS 文件传参及处理技巧分析
May 13 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
JavaScript实现网页动态生成表格
Nov 25 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 #Javascript
Jquery实现纵向横向菜单
Jan 24 #Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 #Javascript
JavaScript jquery及AJAX小结
Jan 24 #Javascript
基于JavaScript短信验证码如何实现
Jan 24 #Javascript
详解JS面向对象编程
Jan 24 #Javascript
js中实现字符串和数组的相互转化详解
Jan 24 #Javascript
访问日志(2) UV(1) 逆序(1) 线程(1) ipv6(1) 进程假死(1) 连接数(1) jenkins(1) PV(1) 字符串(2)
You might like
利用PHP创建动态图像
2006/10/09 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
PHP实现懒加载的方法
2015/03/07 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
ui组件之input多选下拉实现方法（带有搜索功能）
2016/07/14 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
一份python入门应该看的学习资料
2018/04/11 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
世界上最大的家庭自动化公司：Smarthome
2017/12/20 全球购物
捷克购买家具网站：JENA nábytek
2020/03/19 全球购物
教师对学生的评语
2014/04/28 职场文书
房地产开发项目建议书
2014/05/16 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
《花钟》教学反思
2016/02/17 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android