<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
#head{
width:300px;
height:20px;
position:absolute;
}
#head a{ width:50px; height:20px; text-decoration:none; color:#333; font-size:12px; float:left; display:block;text-align:center; line-height:20px; border:#999 solid 1px; margin-left:3px; margin-top:-21px; background-color:#FFF;}
#head a:hover { color:#030; width:52px; font-weight:bold;}
.class {width:300px; height:200px; border:#999 solid 1px;}
.class2 { border:#999 solid 1px;}
#asd { height:600px; width:600px; margin-top:100px;}
</style>
<script type="text/javascript">
function fun1(x,y,z)
{
document.getElementById(x).style.display="block";
document.getElementById(y).style.display="none";
document.getElementById(z).style.display="none";
}
</script>
<body>
<div id="asd">
<div id="head">
<a href="#" id="t1" οnmοusemοve="fun1('n1','n2','n3')">图层1</a>
<a href="#" id="t2" οnmοusemοve="fun1('n2','n1','n3')">图层2</a>
<a href="#" id="t3" οnmοusemοve="fun1('n3','n2','n1')">图层3</a>
</div>
<div id="n1" class="class">111</div>
<div id="n2" class="class" style="display:none;">222</div>
<div id="n3" class="class" style="display:none;">333</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
#head{
width:300px;
height:20px;
position:absolute;
}
#head a{ width:50px; height:20px; text-decoration:none; color:#333; font-size:12px; float:left; display:block;text-align:center; line-height:20px; border:#999 solid 1px; margin-left:3px; margin-top:-21px; background-color:#FFF;}
#head a:hover { color:#030; width:52px; font-weight:bold;}
.class {width:300px; height:200px; border:#999 solid 1px;}
.class2 { border:#999 solid 1px;}
#asd { height:600px; width:600px; margin-top:100px;}
</style>
<script type="text/javascript">
function fun1(x,y,z)
{
document.getElementById(x).style.display="block";
document.getElementById(y).style.display="none";
document.getElementById(z).style.display="none";
}
</script>
<body>
<div id="asd">
<div id="head">
<a href="#" id="t1" οnmοusemοve="fun1('n1','n2','n3')">图层1</a>
<a href="#" id="t2" οnmοusemοve="fun1('n2','n1','n3')">图层2</a>
<a href="#" id="t3" οnmοusemοve="fun1('n3','n2','n1')">图层3</a>
</div>
<div id="n1" class="class">111</div>
<div id="n2" class="class" style="display:none;">222</div>
<div id="n3" class="class" style="display:none;">333</div>
</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
