javascript控制菜单
我的代码如下：<html><head><title>test</title><styletype="text/css"><!--#wrap{width:300px;hei...
我的代码如下：
<html>
<head>
<title>test</title>
<style type="text/css">
<!--
#wrap{width:300px;height:220px;}
ul {padding:0px;margin:0px}
li{width:100px;height:20px;list-style-type:none;text-align:center;float:left;}
#m1{width:300px;height:200px;border:1px solid #4c4cff}
#m2{width:300px;height:200px;border:1px solid #4c4cff}
#m3{width:300px;height:200px;border:1px solid #4c4cff}
#chuang{width:200px;height:220px;background-color:#00FF00;}
-->
</style>
</head>
<script language="javascript">
var old=null;
function changemenu(mydiv){
var obj = document.getElementById(mydiv);
if (old!=null&&old!=obj)
old.style.display='none';
old=obj;
if (obj.style.display=='none'){
obj.style.display='block';
}
}
</script>
<body onload="(changemenu('m1'));">
<div id="wrap">
<ul>
<li><div><a onclick="changemenu('m1');">信息</a></div> </li>
<li><div><a onclick="changemenu('m2');">教育</a></div> </li>
<li><div><a onclick="changemenu('m3');">科技</a></div> </li>
</ul>
<div id="m1" style="DISPLAY: none">1的信息
</div>
<div id="m2" style="DISPLAY: none">2的教育
</div>
<div id="m3" style="DISPLAY: none">3的科技
</div>
</div>
</body>
</html>
这段代码实现了一个在相同位置显示不同菜单下的内容。
现在我想增加一个功能：同时也把菜单名字的底色或者背景也换掉。比如点击“信息”后，下面显示了“信息”所控制的那个层的内容的同时，把“信息”这两个字所在的标签，变的和其他两个菜单不同。
如果不理解我的意思，那么去新浪主页看一下，他下面好多都是这样子，只不过他的菜单是鼠标滑过onmouseover之后就变了，我的这个代码是onclick之后才变的。
希望能给完整的代码，说不清楚，或者我试验了没成功的，不作为最佳答案。
谢谢各位回答者！ 展开
<html>
<head>
<title>test</title>
<style type="text/css">
<!--
#wrap{width:300px;height:220px;}
ul {padding:0px;margin:0px}
li{width:100px;height:20px;list-style-type:none;text-align:center;float:left;}
#m1{width:300px;height:200px;border:1px solid #4c4cff}
#m2{width:300px;height:200px;border:1px solid #4c4cff}
#m3{width:300px;height:200px;border:1px solid #4c4cff}
#chuang{width:200px;height:220px;background-color:#00FF00;}
-->
</style>
</head>
<script language="javascript">
var old=null;
function changemenu(mydiv){
var obj = document.getElementById(mydiv);
if (old!=null&&old!=obj)
old.style.display='none';
old=obj;
if (obj.style.display=='none'){
obj.style.display='block';
}
}
</script>
<body onload="(changemenu('m1'));">
<div id="wrap">
<ul>
<li><div><a onclick="changemenu('m1');">信息</a></div> </li>
<li><div><a onclick="changemenu('m2');">教育</a></div> </li>
<li><div><a onclick="changemenu('m3');">科技</a></div> </li>
</ul>
<div id="m1" style="DISPLAY: none">1的信息
</div>
<div id="m2" style="DISPLAY: none">2的教育
</div>
<div id="m3" style="DISPLAY: none">3的科技
</div>
</div>
</body>
</html>
这段代码实现了一个在相同位置显示不同菜单下的内容。
现在我想增加一个功能：同时也把菜单名字的底色或者背景也换掉。比如点击“信息”后，下面显示了“信息”所控制的那个层的内容的同时，把“信息”这两个字所在的标签，变的和其他两个菜单不同。
如果不理解我的意思，那么去新浪主页看一下，他下面好多都是这样子，只不过他的菜单是鼠标滑过onmouseover之后就变了，我的这个代码是onclick之后才变的。
希望能给完整的代码，说不清楚，或者我试验了没成功的，不作为最佳答案。
谢谢各位回答者！ 展开
1个回答
展开全部
<html>
<head>
<title>test</title>
<style type="text/css">
<!--
#wrap{width:300px;height:220px;}
ul {padding:0px;margin:0px}
li{width:100px;height:20px;list-style-type:none;text-
align:center;float:left;}
#m1{width:300px;height:200px;border:1px solid #4c4cff}
#m2{width:300px;height:200px;border:1px solid #4c4cff}
#m3{width:300px;height:200px;border:1px solid #4c4cff}
#chuang{width:200px;height:220px;background-color:#00FF00;}
-->
</style>
</head>
<script language="javascript">
var old=null;
function changemenu(mydiv,id){
var obj = document.getElementById(mydiv);
if (old!=null&&old!=obj)
old.style.display='none';
old=obj;
if (obj.style.display=='none'){
obj.style.display='block';
}
document.getElementById("i").style.backgroundColor='';
document.getElementById("e").style.backgroundColor='';
document.getElementById("s").style.backgroundColor='';
document.getElementById(id).style.backgroundColor='red';
}
</script>
<body onload="(changemenu('m1'));">
<div id="wrap">
<ul>
<li><div><a id="i" onclick="changemenu('m1','i');">信息</a></div> </li>
<li><div><a id="e" onclick="changemenu('m2','e');">教育</a></div> </li>
<li><div><a id="s" onclick="changemenu('m3','s');">科技</a></div> </li>
</ul>
<div id="m1" style="DISPLAY: none">1的信息
</div>
<div id="m2" style="DISPLAY: none">2的教育
</div>
<div id="m3" style="DISPLAY: none">3的科技
</div>
</div>
</body>
</html>
函数里面多加了一个参数用于接收具体是哪个标题要变色。函数里面增加了4行代码。前3行依次是先把所有的标题背景初始化为没有颜色。最后行代码是把你所点击的代码的背景色变成红色。
你说的新浪的什么的网站的那种属于美工设计。具体方法万变不离其宗。你先把基础学好了再说
<head>
<title>test</title>
<style type="text/css">
<!--
#wrap{width:300px;height:220px;}
ul {padding:0px;margin:0px}
li{width:100px;height:20px;list-style-type:none;text-
align:center;float:left;}
#m1{width:300px;height:200px;border:1px solid #4c4cff}
#m2{width:300px;height:200px;border:1px solid #4c4cff}
#m3{width:300px;height:200px;border:1px solid #4c4cff}
#chuang{width:200px;height:220px;background-color:#00FF00;}
-->
</style>
</head>
<script language="javascript">
var old=null;
function changemenu(mydiv,id){
var obj = document.getElementById(mydiv);
if (old!=null&&old!=obj)
old.style.display='none';
old=obj;
if (obj.style.display=='none'){
obj.style.display='block';
}
document.getElementById("i").style.backgroundColor='';
document.getElementById("e").style.backgroundColor='';
document.getElementById("s").style.backgroundColor='';
document.getElementById(id).style.backgroundColor='red';
}
</script>
<body onload="(changemenu('m1'));">
<div id="wrap">
<ul>
<li><div><a id="i" onclick="changemenu('m1','i');">信息</a></div> </li>
<li><div><a id="e" onclick="changemenu('m2','e');">教育</a></div> </li>
<li><div><a id="s" onclick="changemenu('m3','s');">科技</a></div> </li>
</ul>
<div id="m1" style="DISPLAY: none">1的信息
</div>
<div id="m2" style="DISPLAY: none">2的教育
</div>
<div id="m3" style="DISPLAY: none">3的科技
</div>
</div>
</body>
</html>
函数里面多加了一个参数用于接收具体是哪个标题要变色。函数里面增加了4行代码。前3行依次是先把所有的标题背景初始化为没有颜色。最后行代码是把你所点击的代码的背景色变成红色。
你说的新浪的什么的网站的那种属于美工设计。具体方法万变不离其宗。你先把基础学好了再说
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
