js鼠标点击版tab切换-CSDN博客

代码很简单，主要是布局需要用心研究下，使用时需要把css内注释去除

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab切换</title>
<style>
*{margin:0; padding:0;}
.tab{width:298px; height:200px; border:1px solid #e5e5e5; margin:50px auto;}
a{text-decoration:none; color:#000;}
.tab-tit{height:27px; background:#f8f8f8; position:relative;}                            //定义高度
.tab-tit ul{ list-style-type:none; position:absolute; left:-1px; width:301px;}                        //绝对定位
.tab-tit ul li{float:left; width:58px; text-align:center; line-height:27px;              
border-bottom:1px solid #e5e5e5; padding:0 1px}                 //和tit一样的高度，但是多了一个下边框   左右有1px的内边距防止active加border后布局混乱
.tab-tit ul .active{border-bottom:#fff; background:#fff; border-left:1px solid #e5e5e5; border-right:1px solid #e5e5e5; padding:0;}  
.tab-content div{display:none;}
</style>
<script>
function getByClass(className,parent){
    var oParent=parent?document.getElementById(parent):document;   // 判断parent参数是否存在，不存在，使用document选区文档所有class
    eles=[];                                                   
    elements=oParent.getElementsByTagName('*');
    for(var i=0,l=elements.length;i<l;i++){
        if(elements[i].className==className){                     
            eles.push(elements[i]);                               //所有符合class存入数组，使用是要使用数组形势如 oDiv[0]
        }
    }
    return eles;
}
window.onload=function(){
    var oTab=getByClass('tab-tit');
    var aTab= oTab[0].getElementsByTagName('li');
    var oTabCon=getByClass('tab-content');
    var aTabCon=oTabCon[0].getElementsByTagName('div');
    console.log(aTabCon);
    for(var i=0,l=aTab.length;i<l;i++){
       aTab[i].index=i;                                      //一组元素控制另一组元素，需要加索引
       aTab[i].onclick=function(){
           for(var i=0,l=aTab.length;i<l;i++){
               aTab[i].className='';
           }
           this.className='active';
           
           for(var i=0,l=aTabCon.length;i<l;i++){
                aTabCon[i].style.display='none';
               
           }
           aTabCon[this.index].style.display='block';
           
       }    
    }
}
</script>
</head>

<body>
<div class="tab">
  <div class="tab-tit">
    <ul>
      <li class="active"><a href="javascript:;">关羽</a></li>
      <li><a href="javascript:;">张飞</a></li>
      <li><a href="javascript:;">赵云</a></li>
      <li><a href="javascript:;">马超</a></li>
      <li><a href="javascript:;">黄忠</a></li>
    </ul>
  </div>
  <div class="tab-content">
       <div style="display:block">关羽的儿子</div>
       <div>张飞的儿子</div>
       <div>赵云的儿子</div>
       <div>马超的儿子</div>
       <div>黄忠的儿子</div>
  </div>
</div>
</body>
</html>