请问如何做到“菜单1”默认是红色背景,鼠标滑到“菜单2“背景变红色,鼠标离开此区域以后仍然能保持红色背景,请问怎么做到。 菜单3.4.5依次类推。
如http://www.hao123.com/上方的百度搜索,“网页”默认有背景颜色,点“MP3”或者“视频”后,他们的背景又变色。
如果onMouseMove无法实现换成onClick的方式也行。
<style type="text/css">
.menu { line-height: 30px; height: 30px; border: 1px solid #CCC; background-color: #FFC; }
.menu span a { display:block; height: 35px; line-height: 35px; float:left; padding-right: 8px; padding-left: 8px; font-weight: bold; color: #000; }
.menu span a:hover { color:#FF0; background-color: #900; }
</style>
<div><!-- index-left1 -->
<div class="menu">
<span onMouseMove="JavaScript:ChangeDiv('0','JKDiv_',2)" style="cursor:hand;"><a href="list.htm">菜单1</a></span>
<span onMouseMove="JavaScript:ChangeDiv('1','JKDiv_',2)" style="cursor:hand;"><a href="list.htm">菜单2</a></span>
<span onMouseMove="JavaScript:ChangeDiv('2','JKDiv_',2)" style="cursor:hand;"><a href="list.htm">菜单3</a></span>
<span onMouseMove="JavaScript:ChangeDiv('3','JKDiv_',2)" style="cursor:hand;"><a href="list.htm">菜单4</a></span>
<span onMouseMove="JavaScript:ChangeDiv('4','JKDiv_',2)" style="cursor:hand;"><a href="list.htm">菜单5</a></span>
</div>
<div>
<div id="JKDiv_0">
<ul>
<li><a href="#">菜单1显示的内容..</a></li>
</ul>
</div>
<div id="JKDiv_1" style="display:none;">
<ul>
<li><a href="#">菜单2显示的内容..</a></li>
</ul>
</div>
<div id="JKDiv_2" style="display:none;">
<ul>
<li><a href="#">菜单3显示的内容..</a></li>
</ul>
</div>
<div id="JKDiv_3" style="display:none;">
<ul>
<li><a href="#">菜单4显示的内容..</a></li>
</ul>
</div>
<div id="JKDiv_4" style="display:none;">
<ul>
<li><a href="#">菜单5显示的内容..</a></li>
</ul>
</div>
</div>
<script language="JavaScript" type="text/javascript">
function ChangeDiv(divId,divName,zDivCount)
{
for(i=0;i<5;i++)
{
document.getElementById(divName+i).style.display="none";
}
document.getElementById(divName+divId).style.display="block";
}
</script>
点击变色也可以,离开的时候颜色不变,除非点其他的。
追答首先你需要下载一个jquery的js库文件,下完后注意引入的路径,因为jquery对于web开发js十分方便。
无标题文档
a{ color:#000; font-size:12px; width:40px; height:20px; line-height:20px; display:block; text-decoration:none; text-align:center; margin:0 10px;}
li{ float:left;}
li,ul{ list-style:none;}
a.on{ background:green; color:#fff;}
$(document).ready(function(){
$("a").bind('click',function(){
$("a").removeClass("on");
$(this).addClass("on");
})
});
网页
MP3
视频
贴吧
知道
新闻
地图