<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例016</title>
<style>
* {
padding: 0;
margin: 0;
}
.one {
width: 200px;
//height: 150px;
margin: 0 auto;
border: 1px solid #333;
}
.title {
background-color: #333;
width: 200px;
height: 24px;
}
.title h3 {
float: left;
margin-left: 4px;
}
.tt {
background-color: #666;
border: 1px solid #666;
}
.ttx {
background-color: #999;
border: 1px solid #999;
}
.title h3 a {
text-decoration: none;
color: black;
}
.dis {
display: none;
background-color: #999;
}
li {
list-style: none;
}
</style>
</head>
<body>
<div id="one" class="one">
<div class="title">
<h3 class="tt" onmouseover="demo(0)"><a href="">选项一</a></h3>
<h3 class="tt" onmouseover="demo(1)"><a href="">选项二</a></h3>
<h3 class="tt" onmouseover="demo(2)"><a href="">选项三</a></h3>
</div>
<div class="content" id="con">
<div class="dis">
<ul>
<li>111111</li>
<li>222222</li>
<li>333333</li>
<li>444444</li>
</ul>
</div>
<div class="dis">
<ul>
<li>我爱你</li>
<li>你爱我</li>
<li>我你爱</li>
<li>爱你我</li>
<li>爱我你</li>
</ul>
</div>
<div class="dis">
<ul>
<li>han</li>
<li>handsome</li>
<li>handsomehan</li>
<li>hanhandsome</li>
<li>hanhan</li>
<li>handsomehanhan</li>
<li>hanhanhandsome</li>
</ul>
</div>
</div>
</div>
<script>
function demo(num) {
var h3s = document.getElementsByTagName("h3");
var cons = document.getElementById("con").getElementsByTagName("div");
//alert(cons);
for (var i = 0; i < h3s.length; i ++) {
if(i == num) {
h3s[num].className="ttx";
cons[num].style.display="block";
cons[num].style.backgroundColor="#999";
}else {
h3s[i].className="tt";
cons[i].style.display="none";
}
}
}
</script>
</body>
</html>