原生js与jQuery实现简单的tab切换特效对比

前端技术 2023/09/09 JavaScript

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

　　这个例子比较简单，但却很实用，当然实际工作中我们一般不会这样去写，我们通常会把以此为基础去封装一个可重用的控件，但基本思想不变。

以上所述就是本文的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/26016

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案