js鼠标切换显示DIV层中的CSS问题。 鼠标指到菜单背景色会变,鼠标以后又变回原色。

请问如何做到“菜单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熟悉不,用jquery实现十分容易。还有楼主想鼠标经过变色,离开变回。还是想好123上点击才变色。回复后贴代码追问

点击变色也可以,离开的时候颜色不变,除非点其他的。

追答

首先你需要下载一个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
视频
贴吧
知道
新闻
地图

温馨提示:答案为网友推荐,仅供参考
第1个回答  2012-05-29
其实这个就是选项卡功能了,用插件更简单,如soChange插件(需要的话百度一下就能找到下载);
自己写也不是很麻烦,下面是我用jquery写的(记得调jq库):
<style type="text/css">
*{ margin:0; padding:0;}
.main{ margin:0 auto; width:500px;}

ul.menu{list-style:none; height:28px;}
ul.menu li{ float:left; line-height:28px;}
ul.menu li a{ color:#666; text-decoration:none; padding:0 10px; background:#ffc;}
ul.menu li a.now, ul.menu li a:hover{ text-decoration:none; background:#900; color:#fff;}

ul.cont{list-style:none; border:1px solid #d2d2d2; height:100px;}
ul.cont li{ display:none;}
ul.cont li.now{ display:block;}
</style>
<div class="main">
<ul class="menu">
<li><a href="javascript:" class="now">menu1</a></li>
<li><a href="javascript:">menu2</a></li>
<li><a href="javascript:">menu3</a></li>
<li><a href="javascript:">menu4</a></li>
<li><a href="javascript:">menu5</a></li>
</ul>
<ul class="cont">
<li class="now">cont of menu1</li>
<li>cont of menu2</li>
<li>cont of menu3</li>
<li>cont of menu4</li>
<li>cont of menu5</li>
</ul>
</div>
<script type="text/javascript">
$(function(){
var length = $(".menu li").length;//length记录菜单个数
$(".menu li").each(function(){
$(this).children("a").click(function(){
for(var i=0; i<length; i++){
if($(this).html()==$(".menu li:eq("+i+") a").html()){//匹配操作对象
$(".now").removeClass("now");
$(this).addClass("now");
$(".cont li:eq("+i+")").addClass("now");
}
}
})
})
})
</script>
第2个回答  2012-05-29
<body>
<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,.cur a { color:#FF0; background-color: #900; }
</style>
<div><!-- index-left1 -->
<div class="menu">
<span class="cur" onMouseMove="JavaScript:ChangeDiv('0','JKDiv_',2,this)" style="cursor:hand;">
<a href="list.htm">菜单1</a>
</span>
<span onMouseMove="JavaScript:ChangeDiv('1','JKDiv_',2,this)" style="cursor:hand;">
<a href="list.htm">菜单2</a>
</span>
<span onMouseMove="JavaScript:ChangeDiv('2','JKDiv_',2,this)" style="cursor:hand;">
<a href="list.htm">菜单3</a>
</span>
<span onMouseMove="JavaScript:ChangeDiv('3','JKDiv_',2,this)" style="cursor:hand;">
<a href="list.htm">菜单4</a>
</span>
<span onMouseMove="JavaScript:ChangeDiv('4','JKDiv_',2,this)" 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>
</div>
<script language="JavaScript" type="text/javascript">
var span = document.getElementsByTagName('span');
function ChangeDiv(divId,divName,zDivCount,thisclass)
{
for(i=0;i<span.length;i++)
{
document.getElementById(divName+i).style.display="none";
span[i].className=""
}
thisclass.className = "cur"
document.getElementById(divName+divId).style.display="block";
}
</script>
</body>
你好,帮你补充了一下JS,看看是不是你要的效果? 【css/html/js都改动,请分别替换后查看】
第3个回答  推荐于2016-11-30
已经做好了,测试过了,一下是完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>菜单</title>
<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; }

</style>
<script type="text/javascript">
function change(dex)
{
var id=document.getElementById("menu");
var taga=id.getElementsByTagName("a");
var len=taga.length;
for(var i=0;i<len;i++)
{
var divname='JKDiv_'+i.toString();
if(i==(parseInt(dex)))
{
taga[i].style.backgroundColor='#900';
document.getElementById(divname).style.display="block";
}
else
{
taga[i].style.backgroundColor='#FFC';
document.getElementById(divname).style.display="none";
}
}
}
</script>
</head>

<body>
<div><!-- index-left1 -->
<div id="menu" class="menu">
<span onclick="change('0')" style="cursor:hand;"><a href="#" style=" background-color:#900;">菜单1</a></span>
<span onclick="change('1')" style="cursor:hand;"><a href="#">菜单2</a></span>
<span onclick="change('2')" style="cursor:hand;"><a href="#">菜单3</a></span>
<span onclick="change('3')" style="cursor:hand;"><a href="#">菜单4</a></span>
<span onclick="change('4')" style="cursor:hand;"><a href="#">菜单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>
</body>
</html>本回答被提问者采纳
相似回答