<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title> </title>
<style>
body,ul,li{
margin:0;
padding:0;
list-style: none;
}
.box{
600px;
height: 300px;
border:1px solid red;
margin:0 auto;
}
.top{
600px;
height: 30px;
background: #ccc;
}
.btn{
198px;
height: 28px;
border:1px solid red;
text-align: center;
line-height: 28px;
font-size: 16px;
color: red;
float: left;
cursor: pointer;
}
.bottom{
600px;
height: 270px;
background: yellow;
overflow: hidden;
}
.con{
600px;
height: 270px;
background:red;
float: left;
line-height: 270px;
text-align: center;
font-size: 80px;
}
</style>
<script>
window.onload=function(){
var btn=document.getElementsByClassName('btn');
var cons=document.getElementsByClassName('con');
for(var i=0;i<btn.length;i++){
btn[i].index=i;
btn[i].onclick=function(){
for(var j=0;j<cons.length;j++){
cons[j].style.display="none";
btn[j].style.color="red";
}
this.style.color="#000";
cons[this.index].style.display="block";
}
}
}
</script>
</head>
<body>
<div class="box">
<ul class="top">
<li class="btn" style="color:#000">1</li>
<li class="btn"> 2</li>
<li class="btn">3</li>
</ul>
<ul class="bottom">
<li class="con" style="background: coral;">1</li>
<li class="con" style="background: pink;">2</li>
<li class="con" style="background: aqua;">3</li>
</ul>
</div>
</body>
</html>