首页 > 代码库 > 选项卡的简单原理实现
选项卡的简单原理实现
大家好，我是绅士扮演者，我喜欢将平时练的小案例拿出来与大家分享，也欢迎各位高人评论我的代码，提升技术，留下您宝贵的意见。有些地方可能没有注释，如果感觉有问题可以评论或私聊我都行。
平时小案例之--选项卡：
大家平常写选项卡应该都是通过设置class属性来通过动态添加或设置类名来实现内容的切换吧，我感觉那样的话要设置两套属性，不如直接动态设置css样式来控制内容的切换。下面是简单样式的源码（如有不好的地方，欢迎大家指正）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding:0;margin: 0;}
ul>li{list-style: none;}
div{width: 400px;height: 300px;margin: 50px auto;border: 1px solid black;overflow: hidden;}
.sm{float: left;width: 100px;height: 20px;border-bottom: 1px solid black;}
.lg{width: 400px;height: 280px;background: green;margin-top: 20px;}
</style>
</head>
<body>
<div>
<ul id="ul1">
<li class="sm" >1</li>
<li class="sm" >2</li>
<li class="sm" >3</li>
<li class="sm" >4</li>
</ul>
<ul id="ul2">
<li class="lg" >111111</li>
<li class="lg" style="display: none;">22222</li>
<li class="lg" style="display: none;">333333333</li>
<li class="lg" style="display: none;">444444444</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var sm=document.getElementsByClassName("sm"),
lg=document.getElementsByClassName("lg");
for(var i=0;i<sm.length;i++){
sm[i].index=i;
sm[i].onmouseover=function(){
for(var j=0;j<lg.length;j++){
lg[j].style.display="none";
}
// console.log(this.index);
this.style.backgroundColor="indianred";
lg[this.index].style.display="block";
}
sm[i].onmouseout=function(){
this.style.backgroundColor="white";
// lg[i].style.display="none";
}
}
</script>
当然，大体思想还是排他思想。
选项卡的简单原理实现