Comparison between native js and jQuery to implement simple tab switching special effects _ javascript skills

This article compares native js with jQuery to implement simple tab switching effects, and introduces the differences between js and jQuery. For more information, see. The tab is usually applicable to scenarios where the space is limited, the content is large, and the page aesthetics does not give the user excessive visual fatigue of information. It is widely used. We will use two methods to implement it in a simple way.

First, construct the page element. The clickable part of the tab is usually carried by the list, including ul and ol. Here we let the page sign be horizontally distributed, so we need to make it move to the left. The content of the tab is carried by p. In addition, we need to uniformly control the style and behavior of elements with commonalities, so we have the following dom structure:

      
 
 
        
  
  
t1
        
  
  
t2
        
  
  
t3
        
  
  
t4
        
  
  
t5
      
 
 
      
        
Hi !
        
I Like You!
        
Hello World!
        
How Are You?
        
I'm fine ,and you?
      
 

After ul float left, in order to clear the influence of float on subsequent elements, you can set the clear attribute through the after pseudo class and add zoom to earlier ie versions to trigger ie haslayout. So we have the following style:

html,body,p,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;}

The html section is roughly the same.

When using native js, We will bind click events for each li separately here, so that the current content page is displayed by clicking and other content pages are hidden, the process of explicit/hidden changes the transparency of the content through the timer until it is completely hidden or displayed.

window.onload = function(){  var tabs = document.getElementById("tabbar").getElementsByTagName("li");  var cont = document.getElementById("content").getElementsByTagName("p");  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);      }    }  }};

It can be seen from the above that using native js to operate dom is still quite troublesome, otherwise jQuery with "write less, do more" will not be born. The following is a simple implementation using 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);    });  });

This example is simple but practical. Of course, we generally do not write it like this in actual work. We usually encapsulate a reusable control based on this, but the basic idea remains unchanged.

The above is all the content of this article. I hope you will like it.