鼠标点击更换导航菜单背景图片

surfers_zzf 2010-06-11 12:15:35

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
ul{ padding:0; margin:0; list-style-type:none;}
.menu{
width:250px;
height:36px;
background:url(1.gif) repeat-x;
}
.menu_left002 li{
float:left;
list-style-type:none;
width:75px;
height:36px;
text-align:center;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.menu_left002 ul .menu01{ /*默认菜单的背景*/
background-image:url(1.gif);
background-repeat:no-repeat;
font-weight:normal;
}
.menu_left002 ul .menu02{ /*当前菜单的背景*/
background:url(2.gif) no-repeat;
width:75px;
height:36px;
font-weight:bold;
}
</style>

<script>
function Tab_menu(t1)
{
for(i=1;i<4;i++)
{
if (i==t1)
{
document.getElementById("menu"+t1).className="menu02";
}
}
}
</script>
</head>

<body onload="Tab_menu(1)">
<div class="menu">
<div class="menu_left002">
<ul>
<li class="menu01" id="menu1" onclick="Tab_menu(1);"><a href="#">A</a></li>
<li class="menu01" id="menu2" onclick="Tab_menu(2);"><a href="#">B</a></li>
<li class="menu01" id="menu3" onclick="Tab_menu(3);"><a href="#">C</a></li>
</ul>
</div>
</div>
</body>
</html>

功能:
实现鼠标点击更换导航菜单背景图片.

问题:
当鼠标点击菜单B或点击C栏目后，B或C栏目变换到当前菜单背景,A栏目就变为默认菜单背景。

请问这个JS函数应该如何写.谢.

...全文

2091 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

ff1222 2010-06-11

打赏
举报



function Tab_menu(t1)

{

 for(i=1;i<4;i++)

 {

  if (i==t1)

  {

    document.getElementById("menu"+t1).className="menu02";

  }else{

    document.getElementById("menu"+i).className="menu01";

  }

 }

}

lz是要这个效果？

surfers_zzf 2010-06-11

打赏
举报

[Quote=引用 1 楼 ff1222 的回复:]

JScript code

function Tab_menu(t1)
{
for(i=1;i<4;i++)
{
if (i==t1)
{
document.getElementById("menu"+t1).className="menu02";
}else{
document.getElementById("menu"+i).className="menu0……
[/Quote]

加进去后，鼠标点击是背景的确是跟换了，但是又立刻恢复到原来的默认背景，这是怎么回事？