Perbandingan kesan penukaran tab mudah antara js asli dan kemahiran jQuery_javascript

Halaman tab biasanya sesuai untuk situasi di mana ruang terhad dan terdapat banyak kandungan, sambil mengambil kira keindahan halaman dan tidak memberi pengguna keletihan visual akibat maklumat yang berlebihan. Ia mempunyai pelbagai kegunaan Di bawah ini kami menggunakan dua kaedah untuk melaksanakannya.

Mula-mula, bina elemen halaman. Kami biasanya menggunakan senarai untuk membawa bahagian tab yang boleh diklik, termasuk ul dan ol Di sini kami membuat tab diedarkan secara mendatar, jadi kami perlu menjadikannya terapung ke kiri. Kandungan halaman boleh dihoskan dalam div. Di samping itu, kita perlu mengawal secara seragam gaya dan gelagat elemen dengan ciri yang sama, jadi kita mempunyai struktur dom berikut:

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

Selepas ul terapung ke kiri, untuk mengosongkan kesan terapung pada elemen berikutnya, atribut jelas ditetapkan melalui kelas pseudo selepas, dan pada masa yang sama, versi yang lebih rendah iaitu ie ditambah untuk mengezum untuk mencetuskan iaitu haslayout. Jadi kami mempunyai gaya berikut:

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

Bahagian html lebih kurang sama.

Apabila dilaksanakan menggunakan js asli, kami mengikat peristiwa klik pada setiap li secara berasingan Klik untuk memaparkan halaman kandungan semasa dan menyembunyikan halaman kandungan lain Proses menunjukkan dan menyembunyikan terus meningkatkan dan mengurangkan ketelusan kandungan melalui a pemasa sehingga ia sepenuhnya Sembunyikan atau tunjukkan.

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

Seperti yang dapat dilihat dari di atas, sebenarnya agak menyusahkan untuk menggunakan js asli untuk mengendalikan dom, jika tidak, jQuery "kurang tulis, buat lebih" tidak akan lahir. Berikut ialah pelaksanaan mudah menggunakan 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);
    });
  }
);

Contoh ini agak mudah, tetapi sangat praktikal Sudah tentu, dalam kerja sebenar, kami biasanya tidak menulisnya seperti ini Kami biasanya menggunakannya sebagai asas untuk merangkum kawalan yang boleh digunakan semula, tetapi idea asasnya tetap sama .

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.