原生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 相关文章推荐
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
原生javascript实现分页效果
Apr 21 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
vue+iview使用树形控件的具体使用
Nov 02 Javascript
文字垂直滚动之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
第七节 类的静态成员 [7]
2006/10/09 PHP
PHP下常用正则表达式整理
2010/10/26 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
php文件缓存方法总结
2016/03/16 PHP
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
js日期联动示例
2014/05/02 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
Python编程入门的一些基本知识
2015/05/13 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
Python中extend和append的区别讲解
2019/01/24 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
由面试题加深对Django的认识理解
2019/07/19 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
Final类有什么特点
2012/04/25 面试题
学年末自我鉴定
2014/01/21 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
大专生找工作自荐书
2014/06/10 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
写给同事的离职感言
2015/08/04 职场文书
webpack的移动端适配方案小结
2021/07/25 Javascript
全网非常详细的pytest配置文件
2022/07/15 Python