Vergleich einfacher Tab-Wechseleffekte zwischen nativen JS- und jQuery_Javascript-Kenntnissen

Tab-Seiten eignen sich normalerweise für Situationen, in denen der Platz begrenzt ist und viele Inhalte vorhanden sind, wobei die Schönheit der Seite berücksichtigt wird und Benutzer nicht durch übermäßige Informationen visuell ermüdet werden. Es hat ein breites Anwendungsspektrum. Im Folgenden verwenden wir zwei Methoden, um es einfach umzusetzen.

Erstellen Sie zunächst die Seitenelemente. Normalerweise verwenden wir eine Liste, um den anklickbaren Teil des Tabs zu tragen, einschließlich ul und ol. Hier verteilen wir die Tabs horizontal, sodass wir sie nach links schweben lassen müssen. Der Inhalt der Seite kann in Divs gehostet werden. Darüber hinaus müssen wir die Stile und Verhaltensweisen von Elementen mit gemeinsamen Merkmalen einheitlich steuern, sodass wir die folgende Dom-Struktur haben:

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

Um die Auswirkungen des Floatings auf nachfolgende Elemente zu beseitigen, wird nach dem Verlassen von ul das Attribut „clear“ über die After-Pseudoklasse festgelegt und gleichzeitig die niedrigere Version von IE zum Zoomen hinzugefügt, um IE auszulösen haslayout. Wir haben also den folgenden Stil:

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

Der HTML-Teil ist ungefähr derselbe.

Bei der Implementierung mit nativem js binden wir Klickereignisse hauptsächlich an jedes einzelne Li. Klicken Sie, um die aktuelle Inhaltsseite anzuzeigen und andere Inhaltsseiten auszublenden Timer, bis es vollständig ausgeblendet oder angezeigt wird.

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

Wie aus dem Obigen hervorgeht, ist es tatsächlich ziemlich mühsam, natives js zum Betreiben von dom zu verwenden, sonst wäre die jQuery „Weniger schreiben, mehr tun“ nicht geboren worden. Das Folgende ist eine einfache Implementierung mit 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);
    });
  }
);

Dieses Beispiel ist relativ einfach, aber sehr praktisch. Natürlich schreiben wir es in der Regel nicht so. Wir verwenden es normalerweise als Grundlage, um ein wiederverwendbares Steuerelement zu kapseln, aber die Grundidee bleibt dieselbe .

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.