网易菜单实现(请教修改完善) - JavaScript论坛

得分:0

最简单的方法是给<a>加一个ID 然后修改其属性href

<a id="a5" href="#">sadsad</a>
<script>document.getElementById('a5').href='http://www.bc-cn.net'</script>

">东搞一下西搞一下

第 12 楼

得分:0

[CODE]

clear:both; width:760px;}
div.card a{color:black;font-size:13px;text-

decoration:none;float:left;width:100px;text-align:center;background-

color:fff;margin-right:1px;height:20;padding:6;}
div.card div.f a.f{font:normal 13px 宋体;background-color:#DDDDDD;}
div.card div.a a.a{font:normal 13px 宋体;background-color:#DDDDDD;}
div.card div.b a.b{font:normal 13px 宋体;background-color:#DDDDDD;}
div.card div.c a.c{font:normal 13px 宋体;background-color:#DDDDDD;}
div.card div.d a.d{font:normal 13px 宋体;background-color:#DDDDDD;}
div.card div.e a.e{font:normal 13px 宋体;background-color:#DDDDDD;}
div.card div.content{background-color:#DDDDDD; border:1px solid #DDDDDD;

height:25px;padding:0 0 0 130;text-align:left}
</style>
<body>
<script language="javascript">
var shq={};
shq.cmenu=function(e)
{
var e=window.event?window.event.srcElement:e.target;
if(/a/i.test(e.tagName)){
e.parentNode.className=e.className;
e.parentNode.nextSibling.innerHTML=fill(e.className);
e.parentNode.nextSibling.style.cssText='border-top:none';
e.blur();
}
}
function fill(id){
switch(id){
case "a" : return "<a href='#'>热点新闻</a> | 行业动态 | 企业动态 |

综合报道";break;
case "b" : return "政策发布 | 风险投资 | 民间融资 | 投资环境";break;
case "c" : return "工商注册 | 税务咨询 | 法律顾问 | 办公房产";break;
case "d" : return "企业招聘 | 个人求职 | 猎头公司 | 兼职信息";break;
case "e" : return "热点论坛 | 更新论坛 | 发布论坛";break;
case "f" : return "";break;
}
}

</script>
<div class="card">
<div onMouseOver="shq.cmenu()" class="a">
<a href="#" class="f">首页</a>
<a href="#" class="a">新闻中心</a>
<a href="#" class="b">投资频道</a>
<a href="#" class="c">金融服务</a>
<a href="#" class="d">求职招聘</a>
<a href="#" class="e">论坛</a>
</div>
<div class="content"><script language="javascript">document.write(fill

("a"));</script></div>
</div>
</body>

[/CODE]
我想这样做的但是那个超连接看样子是继承了上面的样式了这样怎么改啊

[此贴子已经被作者于2007-6-6 17:13:55编辑过]

本来讨厌下雨的天空直到听见有人说爱我

第 13 楼

得分:0

还有就是在
case "b" : return "";break;
这个返回值里面能写如ASP代码吗

本来讨厌下雨的天空直到听见有人说爱我

第 14 楼

得分:0

晕死了忘了给连接定义的那个ID了现在已经解决了可能是下午太困的原因也可能是自己太苯了吧
现在直接给超连接副的ID在CSS里定义自己想要的样式就OK了
不过如果有好的办法还是要贴出来啊
麻烦 islet 大哥了

本来讨厌下雨的天空直到听见有人说爱我

第 15 楼

得分:0

[CODE]<style type="text/css">
div.card div{background-color:#fff;float:left;padding:1px; padding-bottom:0; clear:both; width:760px;}
div.card a{color:black;font-size:13px;text-decoration:none;float:left;width:100px;text-align:center;background-color:fff;margin-right:1px;height:20;padding:6;}
div.card div.f a.f{font:normal 13px 宋体;background-color:#DDDDDD;}
div.card div.a a.a{font:normal 13px 宋体;background-color:#DDDDDD;}
div.card div.b a.b{font:normal 13px 宋体;background-color:#DDDDDD;}
div.card div.c a.c{font:normal 13px 宋体;background-color:#DDDDDD;}
div.card div.d a.d{font:normal 13px 宋体;background-color:#DDDDDD;}
div.card div.e a.e{font:normal 13px 宋体;background-color:#DDDDDD;}
div.card div.content{background-color:#DDDDDD; border:1px solid #DDDDDD; height:25px;padding:0 0 0 130;text-align:left}
.card .content a:link {font-size: 13px;color: #0066FF;text-decoration: none;background-color: #DDDDDD; padding:0px;}
.card .content a:visited {font-size: 13px;color: #0066FF;text-decoration: none;background-color: #DDDDDD;}
.card .content a:hover {font-size: 13px;color: #990000;text-decoration: none;background-color: #DDDDDD;}
.card .content div {font-size: 13px;}
</style>
<body>
<script language="javascript">
var shq={};
shq.cmenu=function(e)
{
var e=window.event?window.event.srcElement:e.target;
if(/a/i.test(e.tagName)){
e.parentNode.className=e.className;
e.parentNode.nextSibling.innerHTML=fill(e.className);
e.parentNode.nextSibling.style.cssText='border-top:none';
e.blur();
}
}
function fill(id){
switch(id){
case "a" : return '<a href="#" class="hdlink">热点新闻</a> <a href="#" class="hdlink">行业动态</a> <a href="#" class="hdlink">企业动态</a> <a href="#" class="hdlink">综合报道</a>';break;
case "b" : return '政策发布 | 风险投资 | 民间融资 | 投资环境';break;
case "c" : return '工商注册 | 税务咨询 | 法律顾问 | 办公房产';break;
case "d" : return '企业招聘 | 个人求职 | 猎头公司 | 兼职信息';break;
case "e" : return '热点论坛 | 更新论坛 | 发布论坛';break;
case "f" : return '';break;
}
}</script>
<div class="card">
<div onMouseOver="shq.cmenu()" class="a">
<a href="#" class="f">首页</a>
<a href="#" class="a">新闻中心</a>
<a href="#" class="b">投资频道</a>
<a href="#" class="c">金融服务</a>
<a href="#" class="d">求职招聘</a>
<a href="#" class="e">论坛</a>
</div>
<div class="content"><script language="javascript">document.write(fill("a"));</script></div>
</div>
</body>[/CODE]

[此贴子已经被作者于2007-6-7 8:31:00编辑过]

">东搞一下西搞一下

第 16 楼

得分:0

多谢了啊得抓紧时间学习了

本来讨厌下雨的天空直到听见有人说爱我

第 17 楼

得分:0

如何实现通用性呢？就是说，如果一个页面有好几个这样的菜单，那么怎么样做到不互相影响呢！
当我点击下面的菜单时，上面的菜单发生了变化！如何解决

[CODE]<html>
<head>
<style type="text/css">
div.card div{
background-color:#FFFFFF;
float:left;
padding:2px;
padding-bottom:0;
clear:both;
width:300px;
}
div.card a{
color:black;
font-size:13px;
text-decoration:none;
float:left;
text-align:center;
background-color:#EEEEEE;
margin-right:1px;
}
div.card div.a a.a{
font:normal normal bold 13px 宋体;
background-color:#FFFFFF;
}
div.card div.b a.b{
font:normal normal bold 13px 宋体;
background-color:#FFFFFF;
}
div.card div.c a.c{
font:normal normal bold 13px 宋体;
background-color:#FFFFFF;
}
div.card div.d a.d{
font:normal normal bold 13px 宋体;
background-color:#FFFFFF;
}
div.card div.content{
background-color:#FFFFFF;
height:200px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<script language="javascript">
var shq={};
shq.cmenu=function(e)
{
var e=window.event?window.event.srcElement:e.target;
if(/a/i.test(e.tagName)){
e.parentNode.className=e.className;
document.getElementById("a").style.visibility='hidden';
document.getElementById("b").style.visibility='hidden';
document.getElementById("c").style.visibility='hidden';
document.getElementById("d").style.visibility='hidden';
document.getElementById(e.className).style.visibility='visible';
//e.parentNode.nextSibling.innerHTML="guixiaolan";//fill(e.className);
e.parentNode.nextSibling.style.cssText='border-top:none';
e.blur();
}
}
</script>
<body>
<table width="740" align="center" cellpadding="0" cellspacing="4">
<tr>
<td width="300" valign="top" class="tr1">
<div class="card">
<div onMouseOver="shq.cmenu(event)" class="a">
<a href="#" class="a" style="width:70; ">国内</a>
<a href="#" class="b" style="width:70; ">国际</a>
<a href="#" class="c" style="width:70; ">体育</a>
<a href="#" class="d" style="width:70; ">财经</a>
</div>
<div class="content">
<div id="a" style="position:absolute; visibility:visible; width:295px">1</div>
<div id="b" style="position:absolute; visibility:hidden; width:295px">2</div>
<div id="c" style="position:absolute; visibility:hidden; width:295px">3</div>
<div id="d" style="position:absolute; visibility:hidden; width:295px">4</div>

</div>
</div>
</td>
</tr>
</table>
<table width="740" align="center" cellpadding="0" cellspacing="4">
<tr>
<td width="300" valign="top" class="tr1">
<div class="card">
<div onMouseOver="shq.cmenu(event)" class="a">
<a href="#" class="a" style="width:70; ">国内</a>
<a href="#" class="b" style="width:70; ">国际</a>
<a href="#" class="c" style="width:70; ">体育</a>
<a href="#" class="d" style="width:70; ">财经</a>
</div>
<div class="content">
<div id="a" style="position:absolute; visibility:visible; width:295px">1</div>
<div id="b" style="position:absolute; visibility:hidden; width:295px">2</div>
<div id="c" style="position:absolute; visibility:hidden; width:295px">3</div>
<div id="d" style="position:absolute; visibility:hidden; width:295px">4</div>

</div>
</div>
</td>
</tr>
</table>
</body>
</html[/CODE]>

[url=http://www./]/sign/free.gif" target="_blank">http://ip./sign/free.gif[/url]

第 18 楼

得分:0

你来这里
http://bbs.bc-cn.net/viewthread.php?tid=144155
看六楼的

本来讨厌下雨的天空直到听见有人说爱我

第 19 楼

得分:0

感觉他那个函数写得太复杂!应该可以有比较简单的!

[url=http://www./]/sign/free.gif" target="_blank">http://ip./sign/free.gif[/url]

第 20 楼

得分:0

这是高手所为具体的在请教高手吧

本来讨厌下雨的天空直到听见有人说爱我