js鼠标点击版tab切换

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

代码很简单，主要是布局需要用心研究下，使用时需要把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>