简易选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
#box{width: 220px; height: 220px; margin: 200px auto;}
#box div{width: 200px; height: 200px; background: #ccc; display: none;}
#box .on{background: pink;}
</style>
<script>
window.onload=function(){
var oBox=document.getElementById('box');
var aBtn=oBox.getElementsByTagName('input');/*Btn:button:按钮*/
var aDiv=oBox.getElementsByTagName('div');
//选项卡的核心:先清空所有,才执行当前;
//操作一组元素,使用循环
for (var i=0;i<aBtn.length;i++) {
//自定义一个属性,保存每一个元素的下标;
aBtn[i].index=i;
//操作一组元素中的某一个的时候,使用下标;
aBtn[i].onclick=function(){
//先清空所有的样式;
for (var i=0;i<aBtn.length;i++) {
aBtn[i].className='';
aDiv[i].style.display='none';
}
//谁触发了事件,this就是谁
this.className='on';
aDiv[this.index].style.display='block';
};
}
}
</script>
</head>
<body>
<!--
选项卡对于布局的要求:
一一对应;
-->
<div id="box">
<input type="button" value="aaa" class="on" />
<input type="button" value="bbb" />
<input type="button" value="ccc" />
<div style="display: block;`">111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>