<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
/*上面span部分，背景颜色是天蓝色，下面盒子颜色背景是粉红色，出来第一个盒子，其他盒子都隐藏*/
*{
margin:0;
padding:0;
}
.whole{
width:295px;
height:300px;
margin:100px auto;
}
.shang{
width:100%;
text-align:center;
}
.shang span{
display:inline-block;
background-color:skyblue;
width:70px;
height:30px;
line-height:30px;
}
.xia div{
width:295px;
height:200px;
margin-right:0 5px;
background-color: pink;
display:none;
}
.xia .show{
display:block;
}
.shang .pink{
background-color:pink;
}
</style>
<script>
// js部分，当鼠标划过每一个span时，比如划过新闻时，新闻这个span的背景颜色会变成粉色，其它都还是天蓝色，同时下面新闻板块会显示，其他会隐藏
window.onload=function()
{
var spans=document.getElementById("top").getElementsByTagName("span");
var divs=document.getElementById("bottom").getElementsByTagName("div");
for(var i=0;i<spans.length;i++)
{
spans[i].index=i;
spans[i].onmouseover=function()
{
for(var j=0;j<spans.length;j++)
{
spans[j].className="";
divs[j].className="";
}
this.className="pink";
divs[this.index].className="show";
}
}
}
</script>
</head>
<!--一个大盒子，上面部分是4个span，分别是新闻，体育，娱乐，八卦,下面对应的是具体的内容-->
<body>
<div class="whole" id="whole1">
<div class="shang" id="top">
<span>新闻</span>
<span>体育</span>
<span>娱乐</span>
<span>八卦</span>
</div>
<div class="xia" id="bottom">
<div class="show">新闻板块</div>
<div>体育板块</div>
<div>娱乐板块</div>
<div>八卦板块</div>
</div>
</div>
</body>
