Penjelasan terperinci tentang pelaksanaan JS bagi kemahiran examples

Penjelasan terperinci tentang pelaksanaan JS bagi kemahiran examples_javascript tab

WBOY

Lepaskan： 2016-05-16 15:31:50

asal

1598 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara melaksanakan tab dalam JS. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Idea: Tab ini adalah untuk mengklik butang untuk beralih kepada kandungan yang sepadan, sebenarnya, ia adalah untuk mengklik butang untuk menukar kandungan melalui paparan (tidak menyekat).

1. Mula-mula dapatkan elemen.

2. Gelung for melintasi elemen butang untuk menambah acara onclick atau onmousemove.

3. Kerana butang semasa akan dipaparkan dalam keadaan yang diserlahkan apabila diklik, adalah perlu untuk menetapkan semua gaya butang untuk mengosongkan dan menetapkan paparan semua DIV kepada tiada melalui gelung untuk.

4. Tambahkan gaya pada butang semasa, paparkan DIV semasa dan tetapkan paparan untuk menyekat.

Nota: Untuk menambahkan berbilang acara pada berbilang elemen, anda perlu menggunakan gelung for untuk melintasinya. Jika tab ditukar dengan mengklik, ketinggian butang semasa, klik dan penyerlahan butang ialah dua peristiwa, jadi dua untuk gelung digunakan untuk melintasinya.

Kod HTML:

<div id="box">
 <input type="button" value="1" />
 <input type="button" value="2" />
 <input type="button" value="3" />
 <input type="button" value="4" />
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
</div>

Salin selepas log masuk

Kod JS:

<script>
 window.onload=function(){
  var box=document.getElementById('box');
  var input=box.getElementsByTagName('input');
  var div=box..getElementsByTagName('div');
  for(var i=0;i<input.length;i++){ //循环历遍onclick事件
   input[i].index=i; //input[0].index=0 index是自定义属性
   input[i].onclick=function(){
    for(var i=0;i<input.length;i++){ //循环历遍去掉button样式和把div隐藏
     input[i].className='';
     div[i].style.display='none';
    };
    this.className='active'; //当前按钮添加样式
    div[this.index].style.display='block'; //div显示 this.index是当前div 即div[0]之类的
   };
  };
  };
</script>

Salin selepas log masuk

Tambahan: langkah lengkap untuk menulis tab mudah dengan js

Seperti yang ditunjukkan dalam gambar, tab tulen yang paling ringkas

Langkah pertama, sudah tentu, untuk menulis kod html dan gaya css

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>

Salin selepas log masuk

Langkah kedua ialah untuk mencapai kesan pensuisan yang mudah

Mata 1: abc.document.getElementsByTagName("li"): Mendapat semua elemen dengan tag li di bawah abc Apa yang dikembalikan ialah koleksi elemen dengan beberapa atribut tatasusunan.

Mata 2: Gelung, gelung pertama untuk menambah acara onclick pada li, dan kemudian apabila acara onlink diklik, gelung sekali lagi untuk mengalih keluar gaya tindakan semua tab dan menyembunyikan semua kandungan. Kemudian biarkan pilihan yang diklik dan kandungan yang sepadan dipaparkan.

Mata 3: tab_t_li[i].index = i; Apabila menggelung, tambahkan atribut tambahan pada tab dan tetapkan nilai untuk memadankan tab dan kandungan.

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
<script>
window.onload = function(){
 var tab_t = document.getElementById("tab_t");
 var tab_t_li = tab_t.getElementsByTagName("li");
 var tab_c = document.getElementById("tab_c");
 var tab_c_li = tab_c.getElementsByTagName("div");
 var len = tab_t_li.length;
 var i=0;
 for(i=0; i<len; i++){
  tab_t_li[i].index = i;
  tab_t_li[i].onclick = function(){
   for(i=0; i<len; i++){
    tab_t_li[i].className = '';
    tab_c_li[i].className = 'hide';
   }
   tab_t_li[this.index].className = 'act';
   tab_c_li[this.index].className = '';
  }
 }
}
</script>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>

Salin selepas log masuk

Langkah ketiga ialah menulisnya sebagai fungsi. Kaedah penulisan di atas hanya boleh menggunakan satu tab setiap halaman Jika anda menambah satu lagi, anda perlu membuat salinan dan menukar banyak nama pembolehubah.

Isi penting: tab_t_li[i][evt] Oleh kerana nilai itu dihantar sebagai rentetan, jika ia ditulis secara terus, ia akan menjadi tab_t_li[i]. "onclick" tidak boleh dilaksanakan seperti ini, tetapi akan tab_t_li[" onclick"] akan dilaksanakan seperti ini? soalan.

Baiklah, kini anda boleh mempunyai berbilang suis pada satu halaman Anda hanya perlu menulis nama id, nama teg dan nama acara yang sepadan apabila memanggil fungsi

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
<script>
window.onload = function(){
 tab("tab_t","li","tab_c","div","onmouseover")
 function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
  var tab_t = document.getElementById(tab_t);
  var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
  var tab_c = document.getElementById(tab_c);
  var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
  var len = tab_t_li.length;
  var i=0;
  for(i=0; i<len; i++){
   tab_t_li[i].index = i;
   tab_t_li[i][evt] = function(){
    for(i=0; i<len; i++){
     tab_t_li[i].className = '';
     tab_c_li[i].className = 'hide';
    }
    tab_t_li[this.index].className = 'act';
    tab_c_li[this.index].className = '';
   }
  }
 }
}
</script>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.