js导航菜单问题（急）

soulofwater 2009-12-09 01:32:49

大侠帮我提供个top.js文件，实现点击菜单跳转页面链接的背景变色，谢谢。

top.asp

<script language="javalanguage" src="../javaScript/top.js"></script>
<div id="nav" class="nav">
<ul>
<li><a href="index.asp">Home</a></li>
<li><a href="../about/about.asp" title=
"About">About</a></li>
<li><a href="../products/products.asp"
title="Products">Products</a></li>
<li><a href="buy-online/buy-online.asp" title="Buy-Online">Buy-Online</a></li>
<li><a href=
"distribution/distribution.asp" title="Distribution">Distribution</a> </li>
<li><a href="contact/contact.asp"
title="Contact">Contact</a></li>
</ul>
</div>

index.asp
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!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" />
<link rel="stylesheet" href="Inc/main.css" type="text/css" media="screen" />
<title>无标题文档</title>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">

</div>
</div>
</div>
<div id="footer">

</div>
</body>
</html>

main.css
#nav { margin: 0 0 0 0; padding: 10px 70px 0 0; float: right; height: 27px; background: transparent; voice-family: "\"}\""; voice-family: inherit; padding-left: 10px;}
#nav ul { margin:0; padding:0; list-style:none; }
#nav li { display:inline; margin:0 2px 0 0; padding:0; text-transform:uppercase; line-height: 1.3em; font-size: 120%; }
#nav a, #nav strong { float:left; color:#fff; margin:0 10px 0 10px; padding:0 5px 0 5px; text-decoration:none; font-size: 10px; letter-spacing: 1px; margin-top: 4px; font-family: Arial, Verdana, sans-serif; }
#nav li.page_item { margin: 0 0 0 0; font-weight:bold;}

#nav a {display: block; color:#fff; }

#nav a:hover {display: block;color:#e6ffc5; }

.current_page_item a { background:#2e6da4; -moz-border-radius: 0.5em; border-radius: 0.5em; }（这个是控制菜单背景色的）

...全文

81 5 打赏收藏转发到动态举报

写回复

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

soulofwater 2009-12-09

打赏
举报

回复

是啊，能再帮忙优化下吗？

danjipian 2009-12-09

打赏
举报

回复

有点问题，啊！

soulofwater 2009-12-09

打赏
举报

回复

而且这么写的话，页面一跳转设定的函数就失效了

soulofwater 2009-12-09

打赏
举报

回复

不行啊，代码加上去，一开始菜单就是白色的背景啊。

碧海情天-赵亮 2009-12-09

打赏
举报

回复

<style>
.sel { background:#2e6da4; -moz-border-radius: 0.5em; border-radius: 0.5em; }
.nosel { background:#fff; -moz-border-radius: 0.5em; border-radius: 0.5em; }
</style>

top.js如下（直接写了，你自己摘出去）:
<script>
function setSel(theName,obj,noSel,Sel)
{
for(var i=0;i<$n(theName).length;i++)
{
$n(theName)[i].className=$n(theName)[i]==obj?Sel:noSel;
};
obj.className=Sel;
}

function $n(nameStr)
{
return document.getElementsByName(nameStr);
}

</script>

菜单需要加些料(只取两个，余下你自己加)：
<div id="nav" class="nav">
<ul>
<li> <a name="mn" href="index.asp" class="nosel" onclick="javascript:setSel(this.name,this,'nosel','sel'); >Home </a> </li>
<li> <a name="mn" href="../about/about.asp" title=
"About" class="nosel" onclick="javascript:setSel(this.name,this,'nosel','sel');>About </a> </li>
</ul>
</div>

生效先给分，原理自己过后慢慢想。

1. **首页（index.html）**：展示商城的主要产品、促销活动和导航菜单，通常有轮播图、热销商品、新品推荐等模块。 2. **产品列表页（products.html）**：展示商品分类，用户可以浏览和筛选不同类别的产品。 3. **...

主页-登录后，显示带有用户菜单和搜索选项的导航栏导航栏-导航栏只能在登录后访问，然后可用于导航到页面的不同部分或注销个人资料-用户将能够编辑其信息，查看其工厂和帖子植物-用户将获得他们在系统中输入的...

在建立导航菜单的时候，我们首先布局一个(" 头"+【左，右（自适应）】+”尾“）的HTML页面；来看一下HTML页面的编写： <div id="container"> <div id="head"></div> ...

Mock.js是一个用于生成随机数据和模拟接口请求的JavaScript库。它可以帮助开发人员在前端开发过程中模拟后端接口的返回数据，以便进行前端页面的开发和测试。数据类型丰富Mock.js提供了一套简单易用的API，可以用于...

str=JavaScript/Js<font style=display:none>Jsp&page=1**wenzhang.asp?str=Vbs&page=1**wenzhang.asp?str=Dhtml&page=1**wenzhang.asp?str=Vml&page=1**wenzhang.asp?str=ActiveX&page=1**wenzhang.asp?str=Asp&...

87,993

社区成员

224,698

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章