<style type="text/css">
*{
padding: 0;margin: 0;list-style: none;
}
#ul{
height: 20px;
}
#ul li{
float: left;
width: 40px;
height: 20px;
}
#smallbox{
width: 160px;
height: 100px;
position: relative;
}
#smallbox div{
width: 160px;
height: 100px;
border: 1px solid red;
position: absolute;
float: left;
display: none;
}
.active{
border-top:1px solid red;
}
</style>
<body>
<div id="bigbox">
<ul id="ul">
<li class="active">新闻</li>
<li>体育</li>
<li>娱乐</li>
<li>综艺</li>
</ul>
<div id="smallbox">
<div id="box_one" style="display: block;">新闻</div>
<div id="box_tow">体育</div>
<div id="box_three">娱乐</div>
<div id="box_four">综艺</div>
</div>
</div>
</body>
<script type="text/javascript">
var aul = document.getElementById("ul");
var bli = aul.getElementsByTagName("li");
// alert(bli.length);
var cdiv = document.getElementById("smallbox");
var ddiv = cdiv.getElementsByTagName("div");
// alert(ddiv.length);
for(var i = 0; i<bli.length; i++){ //对li进行遍历,获取点击的是哪个li
bli[i].onclick = function(){
for(var j = 0; j<ddiv.length; j++){ //对要显示的div进行遍历
bli[j].className = "";
ddiv[j].style.display = "none"; //当点击li时候,让所有div都隐藏
if(this == bli[j]){ //判断当前点击的li是所有li中的哪一个 获取哪个j
ddiv[j].style.display = "block"; //让获得的j 即对应的点击哪个li的div显示
this.className = "active";
}
}
}
}
</script>