<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.btns input.cur{/*这是按钮的样式*/
background-color: gold;
}
.cons div{/*这是内容块的样式*/
width: 500px;
height: 500px;
background-color: #bfa;
text-align: center;
display: none;
}
.cons div.cur{/*这是被选中的页的样式*/
display: block;
}
</style>
<script>
window.onload = function(){
var btns = document.getElementById("btns").getElementsByTagName("input");
var cons = document.getElementById("cons").getElementsByTagName("div");
for(var i=0;i<btns.length;i++){
(function(i){
btns[i].onclick = function(){
for(var j=0;j<btns.length;j++){
btns[j].className = "";
cons[j].className = "";
}
this.className = " cur";
cons[i].className = " cur";
}
})(i)
}
}
</script>
</head>
<body>
<div class="btns" id="btns">
<input type="button" value="tab1" class="cur">
<input type="button" value="tab2" class>
<input type="button" value="tab3" class>
</div>
<div class="cons" id="cons">
<div id="con1" class="cur">1</div>
<div id="con2" class="">2</div>
<div id="con3" class="">3</div>
</div>
</body>
</html>
当网页渲染完后，就获取按钮和内容，给按钮绑定点击事件。