原生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 each的几种常用的使用方法示例
Jan 21 Javascript
JavaScript中Function详解
Feb 27 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
文字垂直滚动之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
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
Python探索之修改Python搜索路径
2017/10/25 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
应聘自荐书
2013/10/08 职场文书
结婚喜宴主持词
2014/03/14 职场文书
母亲节感恩活动记录
2014/03/16 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
免职通知
2015/04/23 职场文书
市级三好生竞选稿
2015/11/21 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python