简单的tab框切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input.active {
background: red;
}
#total div {
width: 200px;
height: 200px;
background: #ccc;
display: none;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("total");
var btn=oDiv.getElementsByTagName("input");
var div=oDiv.getElementsByTagName("div");
for(var i=0;i<btn.length;i++){
btn[i].index=i;
btn[i].onclick=function(){
for(var i=0;i<btn.length;i++){
btn[i].className="";
div[i].style.display="none";
}
this.className="active";
div[this.index].style.display="block";
}
}
}
</script>
</head>
<body>
<div id="total">
<input class="active" type="button" value="按钮1" id="btn1">
<input type="button" value="按钮2" id="btn2">
<input type="button" value="按钮3" id="btn3">
<div style="display: block">zjk1</div>
<div>zjk2</div>
<div>zjk3</div>
</div>
</body>
</html>
