求助怎么实现边框切换呢？

<body>
<div style="cursor:hand; background-color:#9CF; width:77px;" onclick="aa(this)" id="bodyno2">A2</div>
<div style="cursor:hand; background-color:#C9F; width:77px;" onclick="aa(this)" id="bodyno1">A1</div>
<input type="hidden" id="hidden" />
<script type="text/javascript" language="javascript">
    function aa(bodyno){
var aa = bodyno.innerHTML;
var hidden = document.getElementById("hidden").value;
document.getElementById(hidden).style.border = '0px solid red'; bodyno.style.border = '1px solid red';
document.getElementById("hidden").value = aa;
}
</script>
</body>
我想实现的是当我点击A1的时候，A1的边框变为红色，当我点击A2的时候，A2的边框变为红色同时A1的边框取消，
这个效果怎么实现啊，求助各位大虾了，感激不尽...

解决方案 »

  1.   

    <body>
    <div style="cursor:hand; background-color:#9CF; width:77px;" onclick="aa(this)" id="bodyno2">A2</div>
    <div style="cursor:hand; background-color:#C9F; width:77px;" onclick="aa(this)" id="bodyno1">A1</div><script type="text/javascript" language="javascript">
    function aa(bodyno){
       var d1 = document.getElementById("bodyno1");
       var d2 = document.getElementById("bodyno2");
       var array = [d1,d2]
       bodyno.style.border="1px solid red"
       for(var i = 0 ; i < array.length; i ++)
       {
       if(array[i]!=bodyno) array[i].style.border="";    
       }
    }
    </script>
    </body>
      

  2.   

    div的ID不是固定的是在后台取的，然后遍历的，所以你这个
       var d1 = document.getElementById("bodyno1");
       var d2 = document.getElementById("bodyno2");
       var array = [d1,d2]
    是不可行的!!!
      

  3.   


    <div style="cursor:hand; background-color:#9CF; width:77px;" onclick="aa(this)" id="bodyno2">A2</div>
    <div style="cursor:hand; background-color:#C9F; width:77px;" onclick="aa(this)" id="bodyno1">A1</div>
    function aa(element){
      element.style.border="1px solid red";
      var otherDiv=(element.id=="bodyno2")?  document.getElementById("bodyno1"):document.getElementById("bodyno2");   
       otherDiv.style.border="";    } 
      

  4.   

    那有什么是固定的？ 这两个div是绝对在一起的吗？或者div中的内容是固定的？
      

  5.   

    我说的不只是针对这两个DIV的操作，是针对多个，也许一个页面会有100个，我只能选中一个DIV，然后把选中的边框设为红色，当我选择其他的DIV时，会把上一个DIV的边框设为"无"...
      

  6.   

    你看我上面问题红字部分，我用了个Hidden来记录上次选中的id，但是取得var hidden之后，我想把id为 var hidden的div的边框设为"无"...是这样的
      

  7.   


      function aa(bodyno){
    var aa = bodyno.innerHTML;
    var hidden = document.getElementById("hidden").value;
    document.getElementById(hidden).style.border = '0px solid red';  bodyno.style.border = '1px solid red';
    document.getElementById("hidden").value = aa;
    }
    你这么做怎么能隐藏以前选中的div呢..变量aa存储的是当前点击的元素中的html内容，假设点击的是id为bodyno1的话，aa=A1,你去找id为A1的元素怎么能找到！
      

  8.   

    按照你的要求,可以这样写：function aa(bodyno){
    var aa =bodyno.id;
    var hidden=document.getElementById("hidden").value;
    if(hidden){
    document.getElementById(hidden).style.border = '0px solid red'; 
    }
    bodyno.style.border = '1px solid red';
    document.getElementById("hidden").value = aa;
    }
      

  9.   

    样式跟html分离下<style>
    .a2{
    cursor:hand; 
    background-color:#9CF; 
    width:77px;

    }
    .a1{
    cursor:hand; 
    background-color:#C9F; 
    width:77px;
    }
    </style><div id="a2" class="a2" onclick="aa(this)" onmouseout="bb(this)" >A2</div>
    <div id="a1" class="a1" onclick="aa(this)" onmouseout="bb(this)">A1</div><script type="text/javascript">
    function aa(obj){
    obj.style.border = '1px solid #CC0000';

    }
    function bb(obj){
    obj.style.border = '';
    }
    </script>