Native JS and jquery to achieve a simple tab switching effect contrast _javascript skills

tab tabs usually apply to limited space and more content while taking into account the appearance of the page does not give the user an information overload visual fatigue situation. The use of the surface is very wide, the following we use two methods to achieve simple.

First, you build the page element. The clickable part of the page sign we usually use the list to carry, including UL and OL, we here let the page check is distributed horizontally, so need to make it to the left. The Content section of the page check uses Div hosting. In addition, we need to unify the control style and behavior for elements that have commonality, so we have the following DOM structure:

<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 left float after, in order to clear the impact of floating on subsequent elements, so through the pseudo class set the clear property, while taking account of IE low version to join Zoom trigger IE haslayout. So you have the following style:

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

The HTML section is roughly the same.

The use of the original JS implementation, we are here mainly for each Li, respectively, binding fixed-point hit event, by clicking so that the current content page display, other content pages hidden, the process of explicit implicit through the timer constantly increase or decrease the transparency of the content until completely hidden or displayed.

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 <=) {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 (E
                Lem) {Elem.style.display = "none";
                Elem.classname = "Cont t" + (Elem.index + 1);
              Flag = true; },
              "Out ");
      } this.classname = "T" + (This.index + 1);

 }
    }
  }
};

Visible from the above, in fact, the use of native JS operation Dom is still relatively troublesome, or "write Less,do more" jquery will not be born. Here's a simple jquery implementation:

$ (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. Not (This). Andself (). EQ (inx). FadeIn (+);});

This example is relatively simple, but very practical, of course, we usually do not write in the actual work, we often use this as a basis to encapsulate a reusable control, but the basic idea is unchanged.

The above mentioned is the entire content of this article, I hope you can enjoy.