帮忙修改一份代码

两个层，当我点击一个的时候层1时，层1边框变红，层2边框颜色白色， 点击层2时，层1边框颜色变白，层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>   
<title>动态添加div</title>
 <script type="text/javascript" language="javascript">
  var div;  //点击图片边框变红
  function borderit(divId){
    var temp=document.getElementById(divId);
temp.style.border="1px solid red";
    alert("divId="+divId);
alert("div="+div);
if(div!=null){
var temp1=document.getElementById(div);
temp1.style.border="0px";
div=divId;
alert("div1="+div);
}
}

</script>  </head>   
<body>          
    <div id="div"onclick="borderit('div')" style="height:20px; width:100px;">
  fasfsafs
</div>
     <div id="div1"onclick="borderit('div1')" style="height:20px; width:100px;">
  fasfsafs
</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>   
    <title>动态添加div</title>
     </head>   
    <body>          
        <div id="div" style="height:20px; width:100px;">
          fasfsafs
        </div>
         <div id="div1" style="height:20px; width:100px;">
          fasfsafs
        </div>
         <script type="text/javascript" language="javascript">
    /*  var div;     //点击图片边框变红
          function borderit(divId){
            var    temp=document.getElementById(divId);        
            temp.style.border="1px solid red";
            alert("divId="+divId);
            alert("div="+div);
            if(div!=null){
            var    temp1=document.getElementById(div);    
            temp1.style.border="0px";
            div=divId;
            alert("div1="+div);
            }
        }*/

    var divs = document.getElementsByTagName('div'),
    len = divs.length;

    for(var i =0 ; i < len; i++){
    !function(i){
    divs[i].onclick = function(){
    for(var i =0 ; i < len; i++){
    divs[i].style.border="0px";
    }
    this.style.border="1px solid red";
    };
    }(i)
    }
        
    </script> 
    </body>   
    </html> 
      

  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>   
    <title>动态添加div</title>
     <script type="text/javascript" language="javascript">
         //点击图片边框变红
          function borderit(divId){
            var temp=document.getElementById(divId); 
             temp.style.border="1px solid red"; 
            if(divId == 'div'){
             document.getElementById('div1').style.border="0px solid";     
            }else{
              document.getElementById('div').style.border="0px solid";  
            }
            
        }
        
    </script>  </head>   
    <body>      
        <div id="div"onclick="borderit('div')" style="height:20px; width:100px;">
          fasfsafs
        </div>
         <div id="div1"onclick="borderit('div1')" style="height:20px; width:100px;">
          fasfsafs
        </div>
    </body>   
    </html> 
      

  3.   

     <script type="text/javascript" language="javascript">
    var div;function borderit(divId){
    var temp=document.getElementById(divId); 
    if(temp.id == "div1"){
    document.getElementById("div").style.border = "";
    }else{
    document.getElementById("div1").style.border = "";
    }
    temp.style.border="1px solid red";
    if(div!=null){
    var temp1=document.getElementById(div);    
    temp1.style.border="0px";
    div=divId;
    }
    }
        
    </script>  
      

  4.   

    简洁点的写法：
    <div id="div1" onclick="theforever_csdn(this)" style="height:20px; width:100px;">theforever</div>
    <div id="div2" onclick="theforever_csdn(this)" style="height:20px; width:100px;">bbs.csdn.net</div><script type="text/javascript" language="javascript">
    var olddiv=document.getElementById('div1');
    //切换点击边框颜色
    function theforever_csdn(thediv){
        olddiv.style.border="0px";
        thediv.style.border="1px solid red";
        olddiv=thediv;
    }
    </script>