首页
所有分类
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 相关文章推荐
Mootools 1.2教程 输入过滤第二部分（字符串）
Sep 15 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
高性能JavaScript DOM编程（1）
Aug 11 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
js实现网页定位导航功能
Mar 07 Javascript
Bootstrap响应式表格详解
May 23 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 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
软件测试工程师面试题(53) Servlet面试题(20) 软件工程师面试题(40) PYTHON面试题(27) UNIX面试题(27) MySQL面试题(19) Javascript面试题(44) LINUX面试题(83) Oracle面试题(81) EJB面试题(46)
You might like
PHP mkdir()定义和用法
2009/01/14 PHP
php在项目中寻找代码的坏味道（综艺命名）
2012/07/19 PHP
firefox插件Firebug的使用教程
2010/01/02 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
python解析文件示例
2014/01/23 Python
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
HTML5新特性 多线程（Worker SharedWorker）
2017/04/24 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
科颜氏加拿大官方网站： Kiehl’s加拿大
2016/08/16 全球购物
美国最大的宠物药店：1-800-PetMeds
2016/10/02 全球购物
美国男士西装打折店：Jos. A. Bank
2017/11/13 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
战友聚会邀请函
2014/01/18 职场文书
英语课外活动总结
2014/08/27 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
埃及王子观后感
2015/06/16 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python