附demo源码下载,分步解析JavaScript实现tab选项卡自

作者:江苏福彩快三计算机网络

Tab 选项卡切换效果在现如今的网页中,运用的也是比较多的,包括点击切换、滑动切换、延迟切换、自动切换等多种效果,在这篇博文里,我们是通过原生 JavaScript 来实现 Tab 点击切换的效果

图片 1

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

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

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

<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';
 }

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

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

本文实例讲述了JS实现图文并茂的tab选项卡效果。分享给大家供大家参考,具体如下:

1. 功能实现

Unsplash

您可能感兴趣的文章:

  • js 多层叠的TAB选项卡
  • 一个精简的JS DIV层tab切换代码
  • 基于jquery的tab切换 js原理
  • 一个js的tab切换效果代码[代码分离]
  • js实现tab选项卡函数代码
  • 纯php打造的tab选项卡效果代码(不用js)
  • Javascript 自适应高度的Tab选项卡
  • 跨浏览器通用、可重用的选项卡tab切换js代码
  • javascript实现tabs选项卡切换效果(自写原生js)
  • javascript实现tabs选项卡切换效果(扩展版)
  • Extjs 3.3切换tab隐藏相应工具栏出现空白解决

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>JS打造的一个图文并茂的选项卡代码</title>
<script type="text/javascript"><!--//--><![CDATA[//><!--
//为选项卡的默认值进行设定,方法为读取cardBar里面的li标签是否已经有selected属性,如果没有则使用默认值。
  function loadTab(){
      //读取cardBar下面所有li标签
      var getId=document.getElementById("cardBar").getElementsByTagName("li");
      //定义一个判断是否有selected的变量
      var selectedItems=0;
      //判断方法,循环读出li标签的className,如果有则selectedItems加1
      for(i=0;i<getId.length;i  ){
        if (getId[i].className == "Selected"){
          selectedItems =1;
        }
      }
      //经过循环,如果selectedItems没有数值,那么说明没有selected的标签,因此给标签加上默认的className
      if (selectedItems==0){
        document.getElementById("cardBar").getElementsByTagName("li")[0].className="Selected";
        document.getElementById("Dcard1").style.display="block";
      }
    }
    //让窗口打开就运行他
    window.onload=loadTab;
    //设定结束
    //进行选项卡效果的触发
    function switchTab(cardBar,cardId){
      //读取cardBar下面所有li标签
      var oItems = document.getElementById(cardBar).getElementsByTagName("li");
      //循环清空li标签下面的selected效果
      for (i=0;i<oItems.length;i   ){
        var x=oItems[i];
        x.className="";
        var y=x.getElementsByTagName("a");
        y[0].style.color="#333";
      }
      //开始选项卡效果的赋值,为选中的li标签增加selected类的属性
      document.getElementById(cardId).className="Selected";
      //读出cardContent 下面的所有div标签
      var dvs=document.getElementById("cardContent").getElementsByTagName("div");
      //循环,判断应该显示的div
      for (i=0;i<dvs.length;i   ){
        if (dvs[i].id==("D" cardId)){
          dvs[i].style.display="block";
        }else{
          dvs[i].style.display="none";
        }
      }
    }
  //--><!]]></script>
  <style type="text/css">
  <!--/*--><![CDATA[/*><!--*/
  body {margin:0 auto;padding:0;font:62.5%/2em "MingLiu" Arial;text-align:center;}
  img, a img {border:0;display:block;}
  .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
  .clearfix {display:inline-block;}
  /* Hides from IE-mac */
  * html .clearfix {height:1%;}
  .clearfix {display:block;}
  /* End hide from IE-mac */
  .tab {width:50%;margin:0 auto;}
  .nav, .nav li a, .hackBox {list-style:none;border:1px solid #ccc;}
  .nav {position:relative;margin:1em 0 0;border-width:0 0 1px;}
  .nav li {float:left;margin:0 .3em;}
  .nav li a {position:relative;display:block;float:left;margin:0 0 -1px;padding:0 .8em;background:#eee;color:#666;font-size:1.1em;line-height:1.8em;text-decoration:none;}
  /*- .nav li a:hover, -*/ .nav li.Selected a {border-bottom-color:#fff;background:#fff;color:#000;line-height:2em;}
  /*对点击下栏显示边框的代码进行美化*/
  .hackBox {display:none;padding:1em 0 0;border-width:0 1px 1px;}
  .hackBox p {margin:0 1em 1em;color:#333;font-size:1.1em;text-align:left;}
  .hackBox img {float:left;width:100px;margin:0 .8em .4em 0;}
  /*]]>*/-->
  </style>
</head>
<body>
<div class="tab">
  <ul class="nav clearfix" id="cardBar">
   <li id="card1"><a href="#" title="" onclick="javascript:switchTab('cardBar','card1');">生死的轮回</a></li>
   <li id="card2"><a href="#" title="" onclick="javascript:switchTab('cardBar','card2');">逝去的吉他</a></li>
   <li id="card3"><a href="#" title="" onclick="javascript:switchTab('cardBar','card3');">解读黄家驹</a></li>
   <li id="card4"><a href="#" title="" onclick="javascript:switchTab('cardBar','card4');">谁伴我闯荡</a></li>
   <li id="card5"><a href="#" title="" onclick="javascript:switchTab('cardBar','card5');">骄阳岁月</a></li>
   <li id="card6"><a href="#" title="" onclick="javascript:switchTab('cardBar','card6');">吉他低泣时</a></li>
  </ul>
  <div id="cardContent">
    <div id="Dcard1" class="hackBox"><p><img src="images/165.jpg" alt="图片 2" />主流音乐对他来说,不过是小菜一碟的牛刀小试,但一样做得出色,而更多才华没来得及表现就被区区三米距离断送了。 家驹的梦想不是成为一个斗士,而是要带大家走入真实美妙丰富的音乐世界,一个祥和的境界。不少玩音乐的人自持清高,家驹却不是,他对生命不亢不卑,用平视而不是俯视的眼光看一切,他追求精神上的高度,那怕看起来很渺茫,却从不因此而背离世界,始终充满着积极和真挚。</p></div>
    <div id="Dcard2" class="hackBox"><p><img src="images/009_165.jpg" alt="图片 3" />我不知道他们心中的家驹是什么样,但我知道感动是一样的。屏幕上的家驹,穿着厚厚的大衣,抬起头笑了,笑容仍如孩子,眼睛开始模糊,那刻真的非常希望,这个人能奇迹般地出现眼前。 BEYOND三子,不管多难过彷徨,时间会淡化,他们仍然有宝贵的生命,可以做想做的事情,看到日出日落,享受好吃的东西,延续各种故事。而家驹,还有着太多来不及实现的愿望,他不能再弹心爱的吉他,不能享受平常的阳光空气,和朋友笑谈。 他永远只能在茫茫黑暗,眼睛无法睁开。 在视频中看到家驹活蹦乱跳,总觉他还在人世,事实上他已经没有未来。 生命,真的辜负不起,谁也不知道下一秒会发生什么,不抓紧一些事情,也许再没机会了。 </p></div>
    <div id="Dcard3" class="hackBox"><p><img src="images/640.jpg" alt="图片 4" />他也很喜欢西方古典音乐,卡门,圆舞曲等都能以自己的方式纯熟演绎。兴趣和思维的广泛让他挥洒自如地写出各种风格的音乐。家驹最喜欢木吉它,如同武器一般带着,随时弹出咋现的灵感,未发表的几百首作品,大半是用木吉它一柱一弦弹下来。古典吉他更是家驹的爱好,常穿插在歌曲或平时的SOLO中。有次队友们激情澎湃地完成各自SOLO后,他一笑说:我没有他们那么强劲,我喜欢文静些的。便拿着那把黑色木吉他,弹出一段西方古典味的音乐。</p></div>
    <div id="Dcard4" class="hackBox"><p><img src="images/165.jpg" alt="图片 5" />依然有人记得这个歌者:黄家驹。称他为歌者并不是最适合,家驹曾在采访中遇到这样的问题:为什么不当独立的歌手?他回答:对唱歌这种东西没感觉,只对乐器才有感觉。确实如此,在BEYOND未进歌坛前玩的是ART ROCK,那种尽情地用乐器把思绪发散的音乐,听听《脑部侵蚀》《大厦》就知道当年他们玩得如此沉醉自由。 </p><p>十多年前的事,很多记得的只有片段。那时港台的偶像歌手,青春组合轰炸着耳朵,简直是耳不遐接。有次听了《灰色轨迹》,被深深触动了,开始注意BEYOND。当时晚自习前有20分钟用来唱歌,老师对此很有顾忌,最怕我们唱情歌,《真的爱你》风靡时,老师一见这四个字,脸色发白,说不要唱这种歌曲,后来解释是送给母亲的歌才通过。那时BEYOND在我心里除了歌外基本没什么印象,而在高中岁月,BEYOND的歌声陪伴了我三年。高中生活是我最辛苦,也是最怀念的时光。那段日子实在太苦了,竞争激烈,压力之大难以说清。每天早上五点急急从家奔到教室,晚上早早赶来自修苦学是我全部的生活,没有娱乐,没有轻松。校长每逢星期一都进行全校训话,所说的归纳只有一句:除了高考,任何事情与我们无关。这样的环境令人一下子意味到人生很多东西,关于生存,关于竞争,关于未来,关于理想。</p></div>
    <div id="Dcard5" class="hackBox"><p><img src="images/012al.jpg" alt="图片 6" />因为在此歌之后便是家强首次试声的《冷雨夜》。家驹的手足情深是令人最感动的地方,让人看到他想起这些的时候,不再只是心如钢铁,还有一份绕指柔。而家驹个性中最让我欣赏的是那份刚正男儿血性。从遥远的《永远等待》《巨人》《谁是勇敢》一直唱到生命结束前的《我是愤怒》《狂人山庄》,这些铿锵有力的歌是家驹个性上的张狂,他沉静若处子,动起来如脱兔。 </p><p>家驹寻觅过,只是他三十一年生命里,始终没抹上这温暖,没有谁陪他闯荡,为他驱散寂寞痛楚,真遗憾。第一次听《谁伴我闯荡》,记不清92年还是93年,在《笑看风云》里,被逼辞职的包文龙木站在电梯里,林贞烈踏入的同时,《谁伴我闯荡》响起。这些画面令我刻骨铭心记得,没有方向感的包文龙走在冷雨飘忽的城市,伴着他的就是这首《谁伴我闯荡》和林贞烈。包文龙和林贞烈,是我对爱情的最完美想象,风雨同舟,相濡以沫,没有浪漫虚无的行为,有的是人生路上的温暖相依,永远信任。</p></div>
    <div id="Dcard6" class="hackBox"><p><img src="images/165.jpg" alt="图片 7" />曾经攻击的人最后默认了BEYOND为此付出的艰辛和所取得的成就不少人随着变改常会忘记自己最初出发点,但家驹始终把持着,尽管有如此多的挫折,甚至为此失去生命。不管自己演出还是和别人一起演出,家驹从来不抢风头。除了早期较拘谨不自然,台风一直非常沉稳。在他生命里,不管红还是不红,对音乐理想始终执着,对朋友始终热诚。通利琴行是家驹早年常去练吉他的地方,那里的老板是当年鼓励家驹参加香港吉他大赛的人,就是在那个大赛,BEYOND开始展现才华。无论什么变迁,只要有BEYOND出现必然有通利琴行的赞助,一直到今天,从无变改。 </p></div>
  </div>
</div>
</body>
</html>

html部分

Tab 选项卡切换效果在现如今的网页中,运用的也是比较多的,包括点击切换、滑动切换、延迟切换、自动切换等多种效果,在这篇博文里,我们是通过原生 JavaScript 来实现 Tab 点击切换的效果

<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>

运行效果图如下:

<button style="background-color:#f60; color: #fff;">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<div style="display:block;">第一个Nian糕</div>
<div>第二个Nian糕</div>
<div>第三个Nian糕</div>

1. 功能实现

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

图片 8

css 部分

html 部分

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

完整实例代码点击此处本站下载.rar)。

div {
 display: none;
 width: 155px;
 height: 100px;
 border: 1px solid #000;
}
<button style="background-color:#f60; color: #fff;">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<div style="display:block;">第一个Nian糕</div>
<div>第二个Nian糕</div>
<div>第三个Nian糕</div>

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

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

接下来是 JS 部分,根据每一步要实现的功能,进而转换成代码,每当我们要实现一个效果的时候,先不要急着去敲代码,而是先思考要怎么去实现,结构是什么样的,某个功能需要用到什么事件等等,自己在脑海里把整个流程过一遍,再去把每一步的逻辑转换成代码

css 部分

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;
}

希望本文所述对大家JavaScript程序设计有所帮助。

a. 获取元素

div {
  display: none;
  width: 155px;
  height: 100px;
  border: 1px solid #000;
}

(4)事件处理函数的绑定封装,实现了浏览器兼容功能。

您可能感兴趣的文章:

  • JS实现简单的tab切换选项卡效果
  • JS封装的选项卡TAB切换效果示例
  • JS实现仿Windows经典风格的选项卡Tab切换代码
  • js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
  • 跨浏览器通用、可重用的选项卡tab切换js代码
  • 一个js的tab切换效果代码[代码分离]
  • 基于jquery的tab切换 js原理
  • javascript仿126邮箱TAB切换效果
  • div css js模拟tab切换效果 事件绑定 IE,firefox兼容
  • jQuery插件zepto.js简单实现tab切换
  • javascript的tab切换原理与效果实现方法
  • JS使用面向对象技术实现的tab选项卡效果示例
  • 基于JavaScript实现Tab选项卡切换效果
  • JS实现的tab切换选项卡效果示例
var btnList = document.getElementsByTagName("button");
var divList = document.getElementsByTagName("div");

接下来是 JS 部分,根据每一步要实现的功能,进而转换成代码,每当我们要实现一个效果的时候,先不要急着去敲代码,而是先思考要怎么去实现,结构是什么样的,某个功能需要用到什么事件等等,自己在脑海里把整个流程过一遍,再去把每一步的逻辑转换成代码

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

注释: document.getElementsByTagName 返回的是一个[类数组对象],可以使用数组的方法对其进行处理,但类数组对象并不具有数组所具有的方法

a. 获取元素

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

本文由江苏福彩快三发布,转载请注明来源

关键词: 江苏福彩快三