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

页面结构与样式准备

首先构建基础的DOM结构。页签导航部分使用无序列表 <ul> 承载，内容部分使用 <div> 容器。为了让页签横向排列，需对列表项设置左浮动，并对容器进行清浮动处理以维持布局稳定。

<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>

CSS样式方面，重点处理浮动清除和绝对定位的内容层。通过伪类 :after 设置 clear:both 清除浮动影响，同时兼容低版本IE的 zoom 属性。内容区域的每个子项设置为绝对定位，并通过 z-index 控制层级。

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 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;}

第1步：原生JS实现淡入淡出切换

原生JS实现的核心在于手动控制元素的显示隐藏以及透明度渐变。通过定时器逐帧修改 opacity 属性，实现平滑的过渡效果。

具体动作说明

1. 绑定事件： 获取所有标签项和内容项，遍历为每个标签项绑定点击事件。
2. 状态锁： 引入布尔变量 flag 防止在动画播放期间重复点击导致状态混乱。
3. 淡出旧内容： 循环遍历所有内容项，除当前选中项外，其他项执行“fadeOut”逻辑。通过递减透明度至0后隐藏元素（display:none）。
4. 淡入新内容： 当前选中的内容项执行“fadeIn”逻辑。通过递增透明度从0至1，使其逐渐显示。
5. UI更新： 切换完成后，更新标签项的class名以反映选中状态。

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){
          elem.style.opacity ? (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);
      }
    }
  }
};

第2步：jQuery简化实现

jQuery通过封装DOM操作和提供内置动画方法，大幅减少了代码量。利用 fade 相关方法和链式调用，可以更简洁地实现相同功能。

具体动作说明

1. 初始化： 页面加载完成后，选取标签和内容元素。隐藏所有内容区域，仅显示第一个。
2. 点击交互： 为每个标签绑定点击事件。获取当前点击项的索引值。
3. 样式切换： 移除所有标签的特定class并添加默认class，然后为当前点击的标签添加选中样式。
4. 动画执行： 对所有内容项执行 fadeOut(300)，随后对对应索引的内容项执行 fadeIn(300)。

$(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.removeClass().addClass("def").andSelf().eq(inx + 1).addClass("t" + (inx + 1));
    cont.fadeOut(300).not(':hidden').andSelf().eq(inx).fadeIn(300);
  });
});

通过对比可见，原生JS需要处理浏览器兼容性细节、动画帧控制及复杂的DOM状态管理，而jQuery则通过API抽象简化了这些步骤。实际开发中，常以此为基础封装可复用的Tab组件。

以上就是原生JavaScript与jQuery实现简单Tab切换特效的详细内容，更多关于原生JS与jQuery对比的资料请关注本站其它相关文章！