js导航菜单问题（急）

大侠帮我提供个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">
<!--#include file="top.asp"-->
</div>
</div>
</div>
<div id="footer">
<!--#include file="footer.asp"-->
</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; }（这个是控制菜单背景色的）

解决方案 »

  1.   

    <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> 生效先给分，原理自己过后慢慢想。