<style>
*{font-size:12px;}
<!-- Nav_a Start -->
#nav_a{
height:33px;
padding-top:5px;
padding-left:5px;
}
#nav_a span{
padding-right:10px;
background:url(images/base_images.jpg) no-repeat right top;
}
#nav_a a:link,#nav_a a:visited{
text-decoration:none;
text-align:center;
width:66px;
padding-top:10px;
padding-bottom:4px;
}
#nav_a a:hover{
color:#FF0000;
background:url(images/button.jpg) no-repeat;
}
<!-- Nav_a End -->
<!-- Nav_b Start -->
#nav_b a:link,#nav_b a:visited{
text-decoration:none;
color:#FFFFFF
display:block;
}
#nav_b{
height:28px;
padding-top:8px;
background:url(images/200812180858590.jpg)
}
#nav_b ul{
list-style-type:none;
margin:0px;
}
#nav_b li{
float:left;
margin-left:10px;
}
<!-- Nav_b End -->
#baseImg{
background:url(images/200812180856440.jpg) repeat-x top;
width:100%;
height:50px;
}
<!-- 主菜单样式 -->
.currentButton{
font-weight:bold;
color:#FF0000;
background:url(images/button.jpg) no-repeat;
}
.oldButton{
color:#FFFFFF;
text-decoration:none;
text-align:center;
width:66px;
padding-top:10px;
padding-bottom:4px;
}
<!-- 子菜单样式 -->
.currentUl a{
display:block;
text-decoration:none;
color:#0000CC;
}
.currentUl a:hover{
color:#FF0000;
}
.oldUl{
display:none;
}
</style>
<title>导航栏效果1</title><body onLoad="changeImg('a','b',1)">
<script>
function changeImg(modtag,ultag,index){
for(i=1;i<=6;i++){
if(i==index){
//如果索引是 i 的话就设置样式为当前样式。
document.getElementById(modtag+i).className="currentButton";
document.getElementById(ultag+i).className="currentUl";
}else{
//否则的话就设置默认样式。
document.getElementById(modtag+i).className="oldButton";
document.getElementById(ultag+i).className="oldUl";
}
}
}
</script>
<div id="baseImg">
<div id="nav_a">
<span><a href="#" id="a1" onMouseMove="this.blur()" onMouseOver="changeImg('a','b',1)">首 页</a></span>
<span><a href="#" id="a2" onMouseMove="this.blur()" onMouseOver="changeImg('a','b',2)">日 志</a></span>
<span><a href="#" id="a3" onMouseMove="this.blur()" onMouseOver="changeImg('a','b',3)">留 言</a></span>
<span><a href="#" id="a4" onMouseMove="this.blur()" onMouseOver="changeImg('a','b',4)">相 册</a></span>
<span><a href="#" id="a5" onMouseMove="this.blur()" onMouseOver="changeImg('a','b',5)">关 于</a></span>
<a href="#" id="a6" onMouseMove="this.blur()" onMouseOver="changeImg('a','b',6)">Test</a>
</div>
<div id="nav_b">
<ul id="b1">
<li><a href="#">第一个</a></li>
<li><a href="#">第一sdffsd个</a></li>
<li><a href="#">第一个</a></li>
<li><a href="#">第一个</a></li>
<li><a href="#">第一个</a></li>
<li><a href="#">第一个</a></li>
<li><a href="#">第一个</a></li>
</ul>
<ul id="b2">
<li><a href="#">第2个</a></li>
<li><a href="#">第2个</a></li>
<li><a href="#">第2个</a></li>
<li><a href="#">第2个</a></li>
<li><a href="#">第2个</a></li>
<li><a href="#">第2个</a></li>
<li><a href="#">第2个</a></li>
</ul>
<ul id="b3">
<li><a href="#">第3个</a></li>
<li><a href="#">第3个</a></li>
<li><a href="#">第3个</a></li>
<li><a href="#">第3个</a></li>
<li><a href="#">第3个</a></li>
<li><a href="#">第3个</a></li>
<li><a href="#">第3个</a></li>
</ul>
<ul id="b4">
<li><a href="#">第4个</a></li>
<li><a href="#">第4个</a></li>
<li><a href="#">第4个</a></li>
<li><a href="#">第4个</a></li>
<li><a href="#">第4个</a></li>
<li><a href="#">第4个</a></li>
<li><a href="#">第4个</a></li>
</ul>
<ul id="b5">
<li><a href="#">第5个</a></li>
<li><a href="#">第5个</a></li>
<li><a href="#">第5个</a></li>
<li><a href="#">第5个</a></li>
<li><a href="#">第5个</a></li>
<li><a href="#">第5个</a></li>
<li><a href="#">第5个</a></li>
</ul>
<ul id="b6">
<li><a href="#">第6个</a></li>
<li><a href="#">第6个</a></li>
<li><a href="#">第6个</a></li>
<li><a href="#">第6个</a></li>
<li><a href="#">第6个</a></li>
<li><a href="#">第6个</a></li>
<li><a href="#">第6个</a></li>
</ul>
</div>
</div>
</body>
- 1
- 2
- 3
- 4
前往页