<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<style>
h3{
100px;
height: 25px;
line-height: 25px;
float: left;
background: #333;
color: #fff;
margin: 0px;
padding: 0px;
border: 5px solid #fff;
}
.selecth3{
background: #fff;
color: #000;
}
#select:after{
content: "";
display: block;
0px;
height: 0px;
clear: both;
}
#content{
padding-top: 20px;
400px;
height: 300px;
background: #333;
color: #fff;
}
#content div{
display: none;
}
#content div:first-child{
display: block;
}
</style>
<body>
<div id="select">
<h3 onmouseover="show(0)" class="selecth3">选项一</h3>
<h3 onmouseover="show(1)">选项二</h3>
<h3 onmouseover="show(2)">选项三</h3>
</div>
<div id="content">
<div>
选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一
</div>
<div>
选项二选项二选项二选项二选项二选项二选项二选项二选项二选项二选项二选项二选项二
</div>
<div>
选项三选项三选项三选项三选项三选项三选项三选项三选项三选项三选项三选项三选项三
</div>
</div>
<script>
var ah3=document.getElementsByTagName('h3');
var contentget=document.getElementById('content').getElementsByTagName('div');
function show(num){
for(var i=0;i<ah3.length;i++)
{
if(i==num){
ah3[num].className="selecth3";
contentget[num].style.display="block";
}
else{
ah3[i].className=" ";
contentget[i].style.display="none";
}
}
}
</script>
</body>
</html>
演示：demo
主要是操作dom数组来操作相应的dom