<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<style>
#card{
margin:0 auto;
width:252px;
}
#title{
background:green;
width:252px;
height:25px;
}
#title ul{
padding:0px;
margin:0px;
}
#title li{
width:80px;
line-height:25px;
color:white;
font-size:12px;
float:left;
list-style-type:none;
border:2px solid white;
text-align:center;
}
#title .titin{
background:gray;
border-color:gray;
}
#content{
width:252px;
height:150px;
background:gray;
color:white;
}
#content div{
display:none;
text-align:center;
}
#content .one{
display:block;
}
</style>
<body>
<div id="card">
<div id="title">
<ul>
<li onmouseover="show(0)" class="titin">第一项</li>
<li onmouseover="show(1)">第二项</li>
<li onmouseover="show(2)">第三项</li>
</ul>
</div>
<div id="content">
<div class="one">
aaaaaaaaaaaaaaaaaaaaa</br>
aaaaaaaaaaaaaaaaaaaaa</br>
aaaaaaaaaaaaaaaaaaaaa</br>
aaaaaaaaaaaaaaaaaaaaa</br>
aaaaaaaaaaaaaaaaaaaaa</br>
aaaaaaaaaaaaaaaaaaaaa</br>
aaaaaaaaaaaaaaaaaaaaa</br>
aaaaaaaaaaaaaaaaaaaaa</br>
</div>
<div>
bbbbbbbbbbbbbbbbbbbbb</br>
bbbbbbbbbbbbbbbbbbbbb</br>
bbbbbbbbbbbbbbbbbbbbb</br>
bbbbbbbbbbbbbbbbbbbbb</br>
bbbbbbbbbbbbbbbbbbbbb</br>
bbbbbbbbbbbbbbbbbbbbb</br>
bbbbbbbbbbbbbbbbbbbbb</br>
bbbbbbbbbbbbbbbbbbbbb</br>
</div>
<div>
ccccccccccccccccccccc</br>
ccccccccccccccccccccc</br>
ccccccccccccccccccccc</br>
ccccccccccccccccccccc</br>
ccccccccccccccccccccc</br>
ccccccccccccccccccccc</br>
ccccccccccccccccccccc</br>
ccccccccccccccccccccc</br>
</div>
</div>
</div>
<script>
var titles = document.getElementById("title").getElementsByTagName("li");
var contents = document.getElementById("content").getElementsByTagName("div");
function show(num){
for(var i=0;i<titles.length;i++){
if(i==num){
titles[i].className="titin";
contents[i].className="one";
}else{
titles[i].className="";
contents[i].className="";
}
}
}
</script>
</body>
</html>