Pelaksanaan mudah kemahiran effect_javascript penukaran tab js

Contoh dalam artikel ini memperkenalkan kod terperinci untuk mencapai kesan penukaran tab js dan berkongsinya dengan semua orang untuk rujukan anda Kandungan khusus adalah seperti berikut

Perkara:

• 1. Dapatkan elemen
• 2. Tambahkan acara onclick (klik) atau onmousemove (move in) pada elemen butang gelung untuk
• 3. Apabila butang semasa diklik, ia akan dipaparkan dalam keadaan yang diserlahkan Tetapkan semua gaya butang kepada kosong melalui gelung untuk dan tetapkan paparan semua div kepada tiada.
• 4. Klik butang semasa untuk menambah gaya, paparkan div semasa dan tetapkan paparan untuk menyekat.
  

kod html:

 <div id="div1">
  <input type="button" class="active" value="1"/>
  <input type="button" value="2"/>
  <input type="button" value="3"/>
  <input type="button" value="4"/>
   <div class="div2" style="display:block;">11</div>
   <div class="div2">22</div>
   <div class="div2">33</div>
   <div class="div2">44</div>
 </div>
 

gaya css:

 .active
  {
  background:#9CC;
  }
 .div2
  {
  width:300px;
  height:200px;
  border:1px #666666 solid;
  display:none;
  }

kod js:

<script>
window.onload=function(){
 
  var odiv=document.getElementById('div1');//获取div
  var btn=odiv.getElementsByTagName('input');//获取div下的input
  var div2=odiv.getElementsByTagName('div') ;//获取div下的div
 
 for(i=0;i<btn.length;i++)//循环每个按钮
  {
   btn[i].index=i //btn[i]是指定button的第i个按钮;为该按钮添加一个index属性，并将index的值设置为i
   btn[i].onclick=function()//按钮的第i个点击事件
  {
  for(i=0;i<btn.length;i++)//循环去掉button的样式，把div隐藏
   {
    btn[i].className='' //清空按钮的样式
    div2[i].style.display='none'//隐藏div
   }
    this.className='active'//自身添加active
    div2[this.index].style.display='block'//this.index是当前div
 
 
  }
  }
 
}
</script>

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.