原生js与jQuery实现简单的tab切换特效对比


Posted in Javascript onJuly 30, 2015

tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形。使用面非常广,下面我们用两种方法简单实现之。

首先,构建页面元素。页签的可点击部分我们通常用列表来承载,包括ul和ol,我们这里让页签呈横向分布,所以需要使之向左浮动。而页签内容部分使用div承载即可。另外,我们需要对具有共性的元素统一控制样式和行为,所以就有了下面的dom结构:

<div id="main">
      <ul id="tabbar" class="cl">
        <li class="t1">t1</li>
        <li class="def">t2</li>
        <li class="def">t3</li>
        <li class="def">t4</li>
        <li class="def">t5</li>
      </ul>
      <div id="content">
        <div class="cont t1">Hi !</div>
        <div class="cont t2">I Like You!</div>
        <div class="cont t3">Hello World!</div>
        <div class="cont t4">How Are You?</div>
        <div class="cont t5">I'm fine ,and you?</div>
      </div>
 </div>

ul左浮动以后,为了清除浮动对后续元素的影响,所以通过after伪类设置clear属性,同时兼顾ie低版本加入zoom触发ie haslayout。所以就有了下面的样式:

html,body,div,ul,li{margin:0; padding:0; }

.cl{zoom:1;}
.cl:after{display:block; height:0; clear:both; visibility:hidden; overflow:hidden; content:'.';}
ul{list-style:none;}
    
body{padding-top:100px; background:#eee; font-family:Microsoft YaHei, Arial, Helvetica, sans-serif;}
#main{margin:0 auto; width:800px;}
#main #tabbar{}
#main #tabbar li,#main #content .cont{text-align:center; color:#fff;}
#main #tabbar li{padding:0 20px; height:35px; line-height:35px; font-size:14px; cursor:pointer; float:left;}
#main #content{height:350px; overflow:hidden; position:relative;}
#main #content .cont{width:100%; height:350px; line-height:350px; font-size:48px; z-index:0; position:absolute;}

#main #tabbar li.def{color:#333; background:#fff;}
#main #tabbar li.t1,#main #content .cont.t1{color:#fff; background:#4e6b9c;}
#main #tabbar li.t2,#main #content .cont.t2{color:#fff; background:#c52946;}
#main #tabbar li.t3,#main #content .cont.t3{color:#fff; background:#33a6ff;}
#main #tabbar li.t4,#main #content .cont.t4{color:#fff; background:#ffab4e;}
#main #tabbar li.t5,#main #content .cont.t5{color:#fff; background:#64bccc;}

html部分大致如此。

采用原生js实现时,我们这里主要对每个li分别绑定点击事件,通过点击使当前内容页显示,其他内容页隐藏,显隐的过程通过定时器不断增减内容的透明度直至完全隐藏或显示。

window.onload = function(){
  var tabs = document.getElementById("tabbar").getElementsByTagName("li");
  var cont = document.getElementById("content").getElementsByTagName("div");
  var len = cont.length;
  var flag = true;
  
  var fade = function(elem, callback, type){
    type || (type = "in");
    var px, timer;
    
    if(type == "in")
    {
      px = 0;
      timer = setInterval(function(){
        px += 3;
        if(px <= 100)
        {
          elem.style.opacity ? (elem.style.opacity = (px / 100)) : (elem.style["filter"] = "alpha(opacity=" + px + ")");
        }
        else
        {
          clearInterval(timer);
          elem.style.opacity ? (elem.style.opacity = 1) : (elem.style["filter"] = "alpha(opacity=100)");
          callback && callback(elem);
        }
      },10);
    }
    else
    {
      px = 100;
      timer = setInterval(function(){
        px -= 3;
        if(px >= 0)
        {
          document.addEventListener ? (elem.style.opacity = (px / 100)) : (elem.style["filter"] = "alpha(opacity=" + px + ")");
        }
        else
        {
          clearInterval(timer);
          elem.style.opacity ? (elem.style.opacity = 0) : (elem.style["filter"] = "alpha(opacity=0)");
          callback && callback(elem);
        }
      },10);
    }
  }
  
  for(var i = 0; i < len; i++)
  {
    cont[i].style.zIndex = len - i;
    tabs[i].index = cont[i].index = i;
    tabs[i].onclick = function(){
      if(flag)
      {
        flag = false;
        cont[this.index].style.display = "block";
        fade(cont[this.index]);
        for(var i = 0; i < len; i++)
        {
          tabs[i].className = "def";
          if(tabs[i].index != this.index)
          {
            fade
            (
              cont[i],
              function(elem)
              {
                elem.style.display = "none";
                elem.className = "cont t" + (elem.index + 1);
                flag = true;
              },
              "out"
            );
          }
        }
        this.className = "t" + (this.index + 1);
      }
    }
  }
};

由上可见,其实使用原生js操作dom还是比较麻烦的,不然“write less,do more”的jQuery也不会诞生。下面用jQuery简单实现:

$(function(){
    var tabs = $("#tabbar li");
    var cont = $("#content .cont");
    var len = cont.length;
    
    cont.each(function(inx, elem){$(elem).css("z-index", len - inx);}).andSelf().hide().andSelf().eq(1).show();
    
    tabs.click(function(){
      var inx = tabs.index(this);
      tabs.removeAttr("class").addClass("def").andSelf().eq(inx + 1).addClass("t" + (inx + 1));
      cont.fadeOut(300).not(this).andSelf().eq(inx).fadeIn(300);
    });
  }
);

这个例子比较简单,但却很实用,当然实际工作中我们一般不会这样去写,我们通常会把以此为基础去封装一个可重用的控件,但基本思想不变。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
js实现动态时钟
Mar 12 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
vue里使用create, mounted调用方法
Apr 26 Vue.js
文字垂直滚动之javascript代码
Jul 29 #Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 #Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 #Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 #Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 #Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 #Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 #Javascript
You might like
PHP Reflection API详解
2015/05/12 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
php之可变函数的实例详解
2017/09/13 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
javascript 避免闭包引发的问题
2009/03/17 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
js实现星星打分效果
2020/07/05 Javascript
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
详解Python用户登录接口的方法
2019/04/17 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
python实现超级马里奥
2020/03/18 Python
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
德国户外商店:eXXpozed
2020/07/25 全球购物
婚纱店策划方案
2014/05/22 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
政风行风评议心得体会
2014/10/21 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
小数乘法教学反思
2016/02/22 职场文书