Comparaison des effets de changement d'onglet simples entre les compétences natives js et jQuery_javascript

Les pages à onglets conviennent généralement aux situations où l'espace est limité et où il y a beaucoup de contenu, tout en tenant compte de la beauté de la page et en ne donnant pas aux utilisateurs une fatigue visuelle due à un excès d'informations. Il a un large éventail d’utilisations. Ci-dessous, nous utilisons deux méthodes pour le mettre en œuvre simplement.

Tout d’abord, construisez les éléments de la page. Nous utilisons généralement une liste pour transporter la partie cliquable de l'onglet, y compris ul et ol. Ici, nous répartissons les onglets horizontalement, nous devons donc les faire flotter vers la gauche. Le contenu de la page peut être hébergé en divs. De plus, nous devons contrôler uniformément les styles et les comportements des éléments ayant des caractéristiques communes, nous avons donc la structure dom suivante :

<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&#63;</div>
        <div class="cont t5">I'm fine ,and you&#63;</div>
      </div>
 </div>

Après que ul floats soit parti, afin d'effacer l'impact du flottant sur les éléments suivants, l'attribut clear est défini via la pseudo-classe after, et en même temps, la version inférieure de ie est ajoutée au zoom pour déclencher ie haslayout. On a donc le style suivant :

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

La partie html est à peu près la même.

Lorsqu'il est implémenté à l'aide de js natif, nous lions principalement les événements de clic à chaque li séparément. Cliquez pour afficher la page de contenu actuelle et masquer les autres pages de contenu. Le processus d'affichage et de masquage continue d'augmenter et de diminuer la transparence du contenu via un. minuterie jusqu'à ce qu'elle soit complètement masquée ou affichée.

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 &#63; (elem.style.opacity = (px / 100)) : (elem.style["filter"] = "alpha(opacity=" + px + ")");
        }
        else
        {
          clearInterval(timer);
          elem.style.opacity &#63; (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 &#63; (elem.style.opacity = (px / 100)) : (elem.style["filter"] = "alpha(opacity=" + px + ")");
        }
        else
        {
          clearInterval(timer);
          elem.style.opacity &#63; (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);
      }
    }
  }
};

Comme le montre ce qui précède, il est en fait assez gênant d'utiliser des js natifs pour faire fonctionner dom, sinon le jQuery "écrire moins, faire plus" ne serait pas né. Ce qui suit est une implémentation simple utilisant 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);
    });
  }
);

Cet exemple est relativement simple, mais très pratique. Bien sûr, dans le travail réel, nous ne l'écrivons généralement pas ainsi. Nous l'utilisons généralement comme base pour encapsuler un contrôle réutilisable, mais l'idée de base reste la même. .

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.