<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.tab_head{
overflow: hidden;
}
button{
50px;
height: 25px;
margin: 0;
float: left;
text-align: center;
}
.tab_content {
border: solid red 1px;
148px;
height: 100px;
}
.tab_content div{
display: none;
}
.tab_content .block{
display: block;
}
.bgColor{
background-color: blue;
}
</style>
<script>
window.onload = function(){
var tab_head = document.getElementsByClassName("tab_head")[0];
var tabs = tab_head.getElementsByTagName("button");//button数组
var tab_content = document.getElementsByClassName("tab_content")[0];
var contents = tab_content.getElementsByTagName("div");//content数组
for (var i=0;i<tabs.length;i++){
tabs[i].onclick = function (){
for(var j=0;j<tabs.length;j++){
if(tabs[j] == this){
tabs[j].className = 'bgColor';
contents[j].className = 'block';
}
else {
tabs[j].className = '';
contents[j].className = '';
}
}
}
}
}
</script>
</head>
<body>
<div class="tab_head">
<button class="bgColor">tab1</button>
<button>tab2</button>
<button>tab3</button>
</div>
<div class="tab_content">
<div class="block">content1</div>
<div>content2</div>
<div>content3</div>
</div>
</body>
</html>