Div+CSS+JS导航菜单
Code：
<html>
<head runat="server">
<title>Div+CSS+Js导航</title>
<link href="Style/sub.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#info
{
float:left;
width:100%;
font-size:93%;
line-height:16px;
}
#info1,#info2,#info3{ border:1px solid #ccc;padding:10px;background:#fff; clear:both;width:500px; height:300px; margin-left:10px; }
.hd {display:none;}
.sw {display:block;}
#info li {float:left;}
#info li a:hover span
{
float:left;
display:block;
background:url("images/tabright2_02.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#84776B;
}
#info li a:hover
{
float:left;
background:url("images/tableft2_02.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
.aa {
float:left;
background:url("images/tableft2_01.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
.bb {
float:left;
display:block;
background:url("images/tabright2_01.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#84776B;
}
.cc {
float:left;
background:url("images/tableft2_02.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
.dd {
float:left;
display:block;
background:url("images/tabright2_02.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#84776B;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<p>
<br />
<br />
<br />
</p>
<div id="info">
<ul>
<li id="tag1" onclick="ChkTag('1');" ><a href="#"><span style="cursor:hand;">最新产品</span></a></li>
<li id="tag2" onclick="ChkTag('2');"><a href="#"><span style="cursor:hand;">最新功能</span></a></li>
<li id="tag3" onclick="ChkTag('3');"><a href="#"><span style="cursor:hand;">最新下载</span></a></li>
</ul>
<div id="info1">
<a href="http://www.es86.com/" target="_blank">网店管家--你身边的电子商务专家1</a> </div>
<div id="info2">
<a href="http://www.es86.com/" target="_blank">网店管家--你身边的电子商务专家2</a> </div>
<div id="info3">
<a href="http://www.es86.com/" target="_blank">网店管家--你身边的电子商务专家3</a> </div>
</div>
</form>
</body>
</html>
<script language="javascript" type="text/javascript">
var k = 1;
for(i=1; i <4; i++)
{
if( i==k)
{
document.getElementById("info"+i).className="sw";
document.getElementById("tag"+i).getElementsByTagName("a")[0].className="cc";
document.getElementById("tag"+i).getElementsByTagName("span")[0].className="dd";
}
else
{
document.getElementById("tag"+i).getElementsByTagName("a")[0].className="aa";
document.getElementById("tag"+i).getElementsByTagName("span")[0].className="bb";
document.getElementById("info"+i).className="hd";
}
}
function ChkTag(tag){
for(i=1; i <4; i++)
{
if (i==tag)
{
document.getElementById("info"+i).className="sw";
document.getElementById("tag"+i).getElementsByTagName("a")[0].className="cc";
document.getElementById("tag"+i).getElementsByTagName("span")[0].className="dd";
}
else
{
document.getElementById("tag"+i).getElementsByTagName("a")[0].className="aa";
document.getElementById("tag"+i).getElementsByTagName("span")[0].className="bb";
document.getElementById("info"+i).className="hd";
}
}
}
</script>
用到的图片：
