原生JS与jQuery实现Tab切换特效对比

作者：函数茶馆时间：2026-10-29 12:55:21浏览：193

本文详细对比了使用原生JavaScript与jQuery实现Tab页签切换效果的两种方案。通过构建HTML结构、CSS样式及JS逻辑，展示了原生JS通过定时器控制透明度实现淡入淡出的过程，以及jQuery利用内置动画方法简化DOM操作的写法。文章旨在帮助开发者理解两种技术栈在处理交互特效时的差异与各自优势。

Tab切换特效概述

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属性，同时结合zoom属性触发IE低版本的hasLayout机制。对应的CSS样式如下：


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部分大致如上所述。

原生JavaScript实现方案

在使用原生JavaScript实现时，主要逻辑是为每个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);
      }
    }
  }
};

jQuery简化实现方案

由此可见，原生JavaScript操作DOM相对繁琐，这也正是jQuery倡导“write less, do more”理念诞生的原因之一。接下来展示如何使用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);
    });
  }
);

该示例虽然简单，但具有实用价值。在实际工作中，我们通常不会直接这样编写，而是以此为基础封装成可复用的组件，但其核心思想保持一致。

以上即为本文的全部内容，希望对大家有所帮助。

作者最新文章

JS大数值转字符串出现科学计数法怎么办

2026-11-05 17:09:21

JS split切割后出现空字符串怎么过滤

2026-11-05 16:00:30

在 React 或 Vue 项目中封装使用 JS 节流防抖

2026-11-05 15:27:29

JavaScript中怎么将带小数的字符串转为整数？

2026-11-05 14:32:38

怎么用JavaScript策略模式重构电商促销计算逻辑？

2026-11-05 14:01:09