Kaedah pelaksanaan kemahiran js tab_javascript

Contoh dalam artikel ini menerangkan kaedah pelaksanaan tab js. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

1. Idea

1. Dapatkan elemen

2. Tambahkan onclick (klik) atau onmousemove (move in) pada elemen butang gelung

3. Apabila butang semasa diklik, ia akan dipaparkan dalam keadaan yang diserlahkan Melalui gelung untuk, tetapkan gaya semua butang kepada kosong dan tetapkan paparan semua div kepada tiada.

4 Klik butang semasa untuk menambah gaya, memaparkan div semasa dan tetapkan paparan untuk menyekat.

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

3. Bahagian CSS:

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

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

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.