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 >