在一个页面上实现多个动态导航效果
[code]<!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=gb2312" />
<title>简单的动态导航效果</title>
<style type="text/css">
#divmain{
width:200px;
float:left;
margin:15px;
border:1px solid #333333;
}
#divmain li{
list-style-type:none;
display:inline;
}
#divmain ul{
background-color:#FFCC33;
padding:0px;
margin:1px;
border-bottom:1px solid #FF9900;
}
#divmain a{
text-decoration:none;
}
#divmain .this{
background-color:#ffffff;
border:1px solid #ffffff;
}
#divmain .nr{
height:100px;
padding:5px;
}
</style>
</head>
<body>
<div id="divmain">
<ul id="menu21">
<li class="this"><a href="#" id="1">test1</a></li>
<li class="off"><a href="#" id="2">test2</a></li>
</ul>
<div id="2a1" class="nr">
NO1
</div>
<div id="2a2" style="display:none" class="nr">
NO2
</div>
</div>
<div id="divmain">
<ul id="menu11">
<li class="this"><a href="#" id="1">test1</a></li>
<li class="off"><a href="#" id="2">test2</a></li>
<li class="off"><a href="#" id="3">test3</a></li>
</ul>
<div id="aa1" class="nr">
NO1
</div>
<div id="aa2" style="display:none" class="nr">
NO2
</div>
<div id="aa3" style="display:none" class="nr">
NO3
</div>
</div>
<div id="divmain">
<ul id="menu">
<li class="this"><a href="#" id="1">test1</a></li>
<li class="off"><a href="#" id="2">test2</a></li>
<li class="off"><a href="#" id="3">test3</a></li>
<li class="off"><a href="#" id="4">test4</a></li>
</ul>
<div id="a1" class="nr">
NO1
</div>
<div id="a2" style="display:none" class="nr">
NO2
</div>
<div id="a3" style="display:none" class="nr">
NO3
</div>
<div id="a4" style="display:none" class="nr">
NO4
</div>
</div>
<script>
function Show(pid,s,num){
var obj = document.getElementById(pid).getElementsByTagName("a")
for (i=0;i<obj.length;i++){
obj.onmouseover = function(){con(this)}
}
function con(t){
for (i=0;i<obj.length;i++){
obj.parentNode.className = "off";
}
t.parentNode.className = "this";
for (i=1;i<=num;i++){
document.getElementById(s+i).style.display="none"
}
document.getElementById(s+t.id).style.display="";
}
}
Show('menu21','2a',2);
Show('menu11','aa',3);
Show('menu','a',4);
</script>
</body>
</html>[/code]
页:
[1]