首页
所有分类
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 相关文章推荐
JS 参数传递的实际应用代码分析
Sep 13 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
bootstrap按钮插件（Button）使用方法解析
Jan 13 Javascript
Vue组件通信实践记录（推荐）
Aug 15 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
layui使用label标签的方法
Sep 14 Javascript
node.js基础知识汇总
Aug 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
jenkins(1) PostMapping(1) 字符串(2) 逆序(1) ResNet50(1) Seaborn(1) yolo3(1) Inception(2) Xception(1) tensorflow(2)
You might like
评分9.0以上的动画电影，剧情除了经典还很燃
2020/03/04 日漫
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
PHP设计模式之适配器模式（Adapter）原理与用法详解
2019/12/12 PHP
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能，页面刷新功能实效问题
2010/12/11 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
python操作MySQL数据库的方法分享
2012/05/29 Python
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
python中的lambda表达式用法详解
2016/06/22 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
Mytheresa美国官网：德国知名的女性奢侈品电商
2017/05/27 全球购物
软件配置管理有什么好处
2015/04/15 面试题
UNIX文件系统常用命令
2012/05/25 面试题
农行实习自我鉴定
2013/09/22 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
借款协议书范本
2014/04/22 职场文书
最美家庭活动方案
2014/08/31 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
党员年度个人总结
2015/02/14 职场文书
公司出纳岗位职责
2015/03/31 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
研讨会通知
2015/04/27 职场文书
MySQL分库分表详情
2021/09/25 MySQL
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL