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

请问如何做到“菜单1”默认是红色背景，鼠标滑到“菜单2“背景变红色，鼠标离开此区域以后仍然能保持红色背景，请问怎么做到。菜单3.4.5依次类推。如http://www.h... 请问如何做到“菜单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> 展开
 我来答
4个回答
#热议# 海关有哪些禁运商品？查到后怎么办？
大卓M9
2012-05-28 · TA获得超过476个赞
知道小有建树答主
回答量：445
采纳率：0%
帮助的人：282万
我也去答题访问个人页
展开全部
楼主对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
        视频
        贴吧
        知道
        新闻
        地图

已赞过 已踩过<
你对这个回答的评价是？
评论 收起
匿名用户
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>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
莎拉凯瑞
2012-05-29 · TA获得超过335个赞
知道答主
回答量：161
采纳率：0%
帮助的人：225万
我也去答题访问个人页
展开全部
<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都改动，请分别替换后查看】
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
叶孤英资4p
推荐于2016-11-30 · TA获得超过1213个赞
知道小有建树答主
回答量：332
采纳率：0%
帮助的人：318万
我也去答题访问个人页
展开全部
已经做好了，测试过了，一下是完整代码：

<!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>
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
收起 更多回答（2）
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

下载百度知道APP，抢鲜体验
使用百度知道APP，立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

京ICP证030173号-1   京网文【2023】1034-029号     ©2024Baidu  使用百度前必读 | 知道协议 | 企业推广

辅 助

模 式