菜鸟求救。。 想做个导航点击后添加样式。、、、

<!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=utf-8" />
<title>无标题文档</title>
<style>
.nav{ width:510px; overflow:hidden; background:red; }
.nav a{ width:100px; height:40px; line-height:40px; text-align:center; background-color:#0C0; border:1px solid #fff; float:left; }
.nav .clickname{ background:#000;}
</style>
<script>
window.onload = function(){
var nav = document.getElementById("nav");
var list = nav.getElementsByTagName("a");
for(var i=0; i < list.length; i++ ){
list[i].onclick = function(){
alert(list[i]);
list[i].classname = clickname;
}
}
}
</script>
</head><body>
<div class="nav" id="nav">
<a href="javascript:void(0);">首页</a>
    <a href="javascript:void(0);">友情链接</a>
    <a href="javascript:void(0);">关于我们</a>
    <a href="javascript:void(0);">诚聘英才</a>
    <a href="javascript:void(0);">网站地图</a>
</div>
</body>
</html>

解决方案 »

  1.   


    <!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=utf-8" />
    <title>无标题文档</title>
    <style>
    .nav{ width:510px; overflow:hidden; background:red; }
    .nav a{ width:100px; height:40px; line-height:40px; text-align:center; background-color:#0C0; border:1px solid #fff; float:left; }
    .nav .clickname{ background:#000;}
    </style>
    <script>
    window.onload = function(){
    var nav = document.getElementById("nav");
    var list = nav.getElementsByTagName("a");
    for(var i=0; i < list.length; i++ ){
    list[i].onclick = (function(n){
    return function(){
    //alert(list[n]);
    list[n].className = "clickname";
    }
    })(i);
    }
    }
    </script>
    </head><body>
    <div class="nav" id="nav">
    <a href="javascript:void(0);">首页</a>
      <a href="javascript:void(0);">友情链接</a>
      <a href="javascript:void(0);">关于我们</a>
      <a href="javascript:void(0);">诚聘英才</a>
      <a href="javascript:void(0);">网站地图</a>
    </div>
      

  2.   

    单个变色的:<!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=utf-8" />
    <title>无标题文档</title>
    <style>
    .nav{ width:510px; overflow:hidden; background:red; }
    .nav a{ width:100px; height:40px; line-height:40px; text-align:center; background-color:#0C0; border:1px solid #fff; float:left; }
    .nav .clickname{ background:#000;}
    </style>
    <script>
    window.onload = function(){
    var nav = document.getElementById("nav");
    var list = nav.getElementsByTagName("a");
    var cur=null;
    for(var i=0; i < list.length; i++ ){
    list[i].onclick = (function(n){
    return function(){
    if(cur!=null) cur.className = "";
    list[n].className = "clickname";
    cur = list[n];
    }
    })(i);
    }
    }
    </script>
    </head><body>
    <div class="nav" id="nav">
    <a href="javascript:void(0);">首页</a>
      <a href="javascript:void(0);">友情链接</a>
      <a href="javascript:void(0);">关于我们</a>
      <a href="javascript:void(0);">诚聘英才</a>
      <a href="javascript:void(0);">网站地图</a>
    </div>
    </body>
    </html>
      

  3.   

    谢谢大鸟。。如果用this来访问的话。 怎么来重写这个代码。 或者说这种最优化的方案代码是什么
      

  4.   

    <!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=utf-8" />
    <title>1.htm</title>
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="p.js"></script>
    <script type="text/javascript" src="dl.js"></script>
    <script type="text/javascript" src="aa.js"></script>
    <style>
    .nav {
    width:510px;
    overflow:hidden;
    background:red;
    }
    .nav a {
    width:100px;
    height:40px;
    line-height:40px;
    text-align:center;
    background-color:#0C0;
    border:1px solid #fff;
    float:left;
    }
    .nav .clickname {
    background:#000;
    }
    </style> <script type="text/javascript">
    window.onload = function() {
    var nav = document.getElementById("nav");
    var list = nav.getElementsByTagName("a");
    for(var i=0; i < list.length; i++ ) {
    list[i].onclick = function() {
    var l=list.length;
    while(l--){
    list[l].className="";
    }
    this.className="clickname";
    }
    }
    }
    </script>
    </head>
    <body>
    <div class="nav" id="nav">
    <a href="javascript:void(0);">首页</a>
    <a href="javascript:void(0);">友情链接</a>
    <a href="javascript:void(0);">关于我们</a>
    <a href="javascript:void(0);">诚聘英才</a>
    <a href="javascript:void(0);">网站地图</a>
    </div> </body>
    </html>