JS控制a标签样式

<!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>
     <title>test</title>
     <style type="text/css">
       .m{color:Red;}
       .n{color:blue;}
   .g{color:#0F0;}
   .y{color:#FC3;}
     </style>
     <script type="text/javascript">
         function change(whichLink) {
             var box = document.getElementById("box");
             var links = box.getElementsByTagName("a");
             for (var i = 0; i < links.length; i++) {
                 links[i].setAttribute("class", "m");
                 whichLink.setAttribute("class", "n");
             }
         }
 function cg(whichLink) {
             var box = document.getElementById("b");
             var links = box.getElementsByTagName("a");
             for (var i = 0; i < links.length; i++) {
                 links[i].setAttribute("class", "g");
                 whichLink.setAttribute("class", "y");
             }
         }
     </script>
 </head>
 <body>
 <ul id="box">
 <li>
 <a href="#" class="m" onclick="change(this);">1</a>
 <ul id="b">
     <li>
         <a href="#" class="g" onclick="cg(this);">4</a>
         <a href="#" class="g" onclick="cg(this);">5</a>
         </li>
     </ul>
 </li>
 <li>
 <a href="#" class="m" onclick="change(this);">2</a>
 <ul id="b">
     <li>
         <a href="#" class="g" onclick="cg(this);">4</a>
         <a href="#" class="g" onclick="cg(this);">5</a>
         </li>
     </ul>
 </li>
 <li>
 <a href="#" class="m" onclick="change(this);">3</a>
 <ul id="b">
     <li>
         <a href="#" class="g" onclick="cg(this);">4</a>
         <a href="#" class="g" onclick="cg(this);">5</a>
         </li>
     </ul>
 </li>
 </ul>
 </body>
 </html>
我有两个ul，里面的li包含着多个a标签，我想实现的功能是，当我点击第一个ul下面的a标签时，该a的class变成n，其他大的ul下面的a的class变成m，小的ul里面的a标签不会变化。我这样子写，当我点击大的ul下面的a标签时，小ul里面的a标签也会变化。清帮我改一下上面的代码。

解决方案 »

  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>
      <title>test</title>
      <style type="text/css">
      .m{color:Red;}
      .n{color:blue;}
      .g{color:#0F0;}
      .y{color:#FC3;}
      </style>
      <script type="text/javascript">
      function change(whichLink) {
      var box = document.getElementById("box");
      var links = box.getElementsByTagName("a");
      for (var i = 0; i < links.length; i++){
      if(links[i].className=="m" || links[i].className=="n")
      links[i].setAttribute("class", "m");
      whichLink.setAttribute("class", "n");
      }
      }
     function cg(whichLink,id) {
      var box = document.getElementById(id);
      var links = box.getElementsByTagName("a");
      for (var i = 0; i < links.length; i++) {
      if(links[i].className=="g" || links[i].className=="y" )
      {
      links[i].setAttribute("class", "g");
      whichLink.setAttribute("class", "y");
      }
      }
      }
      </script>
     </head>
     <body>
     <ul id="box">
     <li>
     <a href="#" class="m" onclick="change(this);">1</a>
     <ul id="b">
      <li>
      <a href="#" class="g" onclick="cg(this,'b');">4</a>
      <a href="#" class="g" onclick="cg(this,'b');">5</a>
      </li>
      </ul>
     </li>
     <li>
     <a href="#" class="m" onclick="change(this);">2</a>
     <ul id="c">
      <li>
      <a href="#" class="g" onclick="cg(this,'c');">4</a>
      <a href="#" class="g" onclick="cg(this,'c');">5</a>
      </li>
      </ul>
     </li>
     <li>
     <a href="#" class="m" onclick="change(this);">3</a>
     <ul id="d">
      <li>
      <a href="#" class="g" onclick="cg(this,'d');">4</a>
      <a href="#" class="g" onclick="cg(this,'d');">5</a>
      </li>
      </ul>
     </li>
     </ul>
     </body>
     </html>