<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 440px;
height: 300px;
/*background: #cccccc;*/
overflow: hidden;
}
.list_main{
width: 100%;
height: 30px;
}
.list_main li{
width: 100px;
height: 30px;
float: left;
text-align: center;
line-height: 30px;
font-size: 18px;
margin-left: 10px;
/*background: red;*/
}
.list{
width: 1200px;
height: 270px;
}
.list div{
width: 440px;
height: 100%;
float: left;
background: skyblue;
}
.on{
background: yellow;
}
.no{
background: red;
}
</style>
</head>
<body>
<div class="box" id="box">
<ul class="list_main" id="list_main">
<li class="on">1</li>
<li class="no">2</li>
<li class="no">3</li>
<li class="no">4</li>
</ul>
<div class="list" id="list">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
<script>
var list_main=document.getElementById('list_main'),
list_main_lis=list_main.getElementsByTagName('li'),
list=document.getElementById('list'),
list_Divs=list.getElementsByTagName('div');
for(var i=0;i<list_Divs.length;i++){
list_main_lis[i].index=i;
list_main_lis[i].onclick=function(){
for(var j=0;j<list_Divs.length;j++){
list_Divs[j].style.display="none";
list_main_lis[j].className="no";
}
list_Divs[this.index].style.display="block";
this.className="on";
}
this.className="on";
}
</script>
</body>
</html>