代码很简单，主要是布局需要用心研究下，使用时需要把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; 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>
感谢Amy老师的教程http://www.imooc.com/learn/176