纯js，tab切换

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js选项卡</title>
<style>
.active{
background: yellow;
}
#div1 div{
display: none;
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
<script>
window.onload=function(){
var div1 =document.getElementById("div1");
var inputs =div1.getElementsByTagName("input");
var divBorder =div1.getElementsByTagName("div");

for(var i=0;i<inputs.length;i++){
inputs[i].index=i; //获取索引下标
inputs[i].onclick=function(){
for(var i=0;i<inputs.length;i++){
inputs[i].className="";
divBorder[i].style.display="none";
}
this.className="active";
divBorder[this.index].style.display="block";
};
}
}
</script>
</head>
<body>
<div id="div1">
<input type="button" value="数学" class="active">
<input type="button" value="语文">
<input type="button" value="英语">
<input type="button" value="生物">
<hr/>
<div style="display: block">111s</div>
<div>222s</div>
<div>333s</div>
<div>444s</div>
</div>
</body>
</html>

posted @ 2018-08-30 17:58  quitpoison  阅读(92)  评论(0)    收藏  举报