原生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.ui.progressbar 中文文档
Nov 26 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 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
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
php生成图片验证码
2015/06/09 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
Javascript中的数学函数集合
2007/05/08 Javascript
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
javascript求日期差的方法
2016/03/02 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
js 调用百度分享功能
2017/02/27 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
详解Python3中的 input() 函数
2020/03/18 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
红领巾广播站广播稿
2014/02/01 职场文书
益达广告词
2014/03/14 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
大四毕业生自荐书
2014/07/05 职场文书
手机被没收的检讨书
2014/10/04 职场文书
服装区域经理岗位职责
2015/04/10 职场文书