js选项卡案例详情（原生js）

1,知识点

1,获取标签节点（Dom）

2,点击事件（onclick）

3,项数组中添加条目（push）

2,思路

1，获取标题列表及内容列表

2，循环标题列表并且给标题添加索引值

3，在循环里添加点击事件（把所有的标题列表和内容列表设为非当前状态，再把当点击的项的标题和内容设为当前状态）

3，案例具体代码

1，css

.nav{width:100%;height:30px;background:#eee;}
div, body ,ul ,li{margin:0 ;padding:0;list-style-type:none;text-align:center;}
#tab{width:100%;}
#tab ul li{width:33%;float:left;}
.box{width:100%;height:400px;display:none;}

2,html

<div id="tab">
   <div class="nav">
   <ul>
   <li><a href="#">护肤</a></li><li><a href="#">彩妆</a></li><li><a href="#">精油</a></li></ul>
   </div>
   <div class="box">
   <div class="tab_l">123左护肤</div>
   <div class="tab_r">13344455555右</div>
   </div>
      <div class="box">
   <div class="tab_l">123左彩妆</div>
   <div class="tab_r">13344455555右</div>
   </div>
      <div class="box">
   <div class="tab_l">123左精油</div>
   <div class="tab_r">13344455555右</div>
   </div>
</div>

3，javascript

<script type="text/JavaScript">
 window.οnlοad=function()
{
    var oTab=document.getElementById('tab');
    var aLi=getByClass(oTab, 'nav')[0].getElementsByTagName('li');
    var aDiv=getByClass(oTab, 'box');
    var i=0;
    
    aDiv[0].style.display='block';
    
    for(i=0; i<aLi.length; i++)
    {   //给每个标题添加索引
        aLi[i].index=i;
        aLi[i].οnclick=function()
        {   //把所有的项设为非当前状态
            for(i=0; i<aLi.length; i++)
            {
                aLi[i].className='';
                aDiv[i].style.display='none';
            }
              //把点击的项设为当前状态
            this.className='active';
            aDiv[this.index].style.display='block';
        };
       
    }
};
//
function getByClass(oParent, sClassName)
{
    var aElm=oParent.getElementsByTagName('*');
    console.log("aElm")
    console.log(aElm)
    var aArr=[];
    for(var i=0; i<aElm.length; i++)
    {
        if(aElm[i].className==sClassName)
        {
            aArr.push(aElm[i]);
        }
    }
    return aArr;
}
</script>

4,注意事项

1，有些标签取出来是数组需要加索引才能取出值

,