javascript中对象的运用

 今天在做导航栏时,所用到的javascript脚本:

<div id="tabs9">
                                        <ul id="abs">
                                                   <li id="a0" onclick="aa(this.id);"><a href="#" ><span>Home</span></a></li>
                                                  <li id="a1" onclick="aa(this.id);"><a href="#"><span>InBox</span></a></li>
                                                 <li id="a2" onclick="aa(this.id);"><a href="#"><span>Send Message</span></a></li>
                                                 <li id="a3" onclick="aa(this.id);"><a href="#"><span>MyFriend</span></a></li>
                                    
                         </ul>
</div>

本来想用mouserover 和mouserout 来实现背景图片的轮换,不过最后还是选择的运用样式比较简单一些.样式如下:

/**//*- Menu Tabs 9--------------------------- */

    #tabs9 {...}{
      float:left;
      width:100%;
      font-size:12px;
      line-height:normal;
      }
    #tabs9 ul {...}{
          margin:0;
          padding:10px 10px 0 50px;
          list-style:none;
      }
    #tabs9 li {...}{
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs9 a {...}{
      float:left;
      margin:0;
      padding:4px 0 0 4px;
      text-decoration:none;
      }
    #tabs9 a span {...}{
      float:left;
      display:block;
      background:url("../../SystemFiles/RecruiteCenter/CompanyInfo/navbg1.gif") top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /**//* Commented Backslash Hack hides rule from IE5-Mac */
    #tabs9 a span {...}{float:none;}
    /**//* End IE5-Mac hack */
    #tabs9 a:hover span {...}{
      color:#FFF;
      }
    #tabs9 a:hover {...}{
      background-position:0% -42px;
      }
    #tabs9 a:hover span {...}{
        background-position:100% -42px;
       background:url("../../SystemFiles/RecruiteCenter/CompanyInfo/navbg2.gif")  top;
       font-weight:bold;
      }

      #tabs9 #current a {...}{
              background-position:0% -42px;
      }
      #tabs9 #current a span {...}{
              background-position:100% -42px;
              }

最重的的是当onclick时触发事件,循环替换和设置id.代码如下:

<script language=javascript type=text/javascript>
    function aa(id)
    ...{
        var bb = document.getElementById("abs");//取得对像
        var len = bb.getElementsByTagName("li");//取得相应对象下面的html标记的对象数组
        //alert(bb.getElementsByTagName("li")[0].id);//获得对象数组中的第一个元素的id
        //循环设置对象数组中的ID值,以便应用相应的样式
        for(var i=0;i<len.length;i++)
        ...{
            if(id == bb.getElementsByTagName("li")[i].id)
            ...{
                bb.getElementsByTagName("li")[i].id = "current";
            }
            else
            ...{
                bb.getElementsByTagName("li")[i].id = "a"+i;
            }
        }
    }
</script>