<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
300px;
height: 300px;
margin: 0 auto;
box-sizing: border-box;
}
#ul {
list-style: none;
100%;
}
#ul li.fli {
font-weight:bold;">#ccc;
color: red;
}
ul {
overflow: hidden;
zoom: 1;
list-style-type: none;
}
#ul li {
float: left;
25%;
}
#divs {
300px;
height: 300px;
}
#divs div {
300px;
height: 300px;
display: none;
border: 1px solid red;
}
#divs div.fdiv {
display: block;
font-weight:bold;">yellow;
}
span{
margin-left: 134px;
}
</style>
</head>
<body>
<div class="div">
<ul id="ul">
<li class="fli">鞋子</li>
<li>袜子</li>
<li>背包</li>
<li>衣服</li>
</ul>
<div id="divs">
<div class="fdiv">
<span >鞋子</span>
</div>
<div>
<span>袜子</span>
</div>
<div>
<span>背包</span>
</div>
<div>
<span>衣服</span>
</div>
</div>
</div>
<div style="300px;height: 120px;background:skyblue;">
</div>
<script>
var lis = document.getElementById('ul').getElementsByTagName('li');
var divs=document.getElementById('divs').getElementsByTagName('div');
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
change(this);
}
}
function change(obj){
for(var i=0;i<lis.length;i++){
if(lis[i]==obj){
lis[i].className='fli';
divs[i].className='fdiv'
}
else{
lis[i].className='';
divs[i].className='';
}
}
}
</script>
</body>
</html>