Div+CSS+Js导航
#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;
}
var k = 1;
for(i=1; 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 {
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";
}
}
}
用到的图片：
查看更多关于Div+CSS+JS导航菜单_html/css_WEB-ITnose的详细内容...