<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input {
background-color: white;
}
.active {
background-color: yellow;
}
div {
height: 200px;
width: 200px;
background-color: pink;
display: none;
}
</style>
<script>
window.onload = function() {
var aBtn = document.getElementsByTagName('input');
var aDiv= document.getElementsByTagName('div');
var i=0;
for(i=0; i<aBtn.length;i++) {
aBtn[i].index=i; //给元素添加序号
aBtn[i].onclick=function() {
//分了两部，都是白的，然后点完黄的
for(i=0; i<aBtn.length;i++){
aBtn[i].className='';
aDiv[i].style.display='';
}
//alert('点击了第'+this.index+'个按钮');
aDiv[this.index].style.display='block';
this.className="active"; //this指当前被点击的按钮
}
}
};
</script>
</head>
<body>
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block">111</div>
<div>222</div>
<div>333</div>
</body>
</html>
选项卡
效果原理
·点击按钮时，改变class 和 style.display
选项卡头部标签
·所有按钮的className都为空
·让当前按钮的className为active
-this的使用
选项卡的内容
·所有的div的display都为none
·让当前div的display为block
