js兼容问题

<script>
function aa1show(){
  
a1 = document.getElementById('aa1');
a2 = document.getElementById('aa2');
a3 = document.getElementById('aa3');
a1.style.display='';
a2.style.display='none';
a3.style.display='none';
}function aa2show(){
  
a1 = document.getElementById('aa1');
a2 = document.getElementById('aa2');
a3 = document.getElementById('aa3');
a1.style.display='none';
a2.style.display='';
a3.style.display='none';
}
</script>
<a onclick="aa1show()">aa1</a>
<div id="aa1" style="display:''">aa1</div>
<div id="aa2" style="display:none">aa2</div>
<div id="aa3" style="display:none">aa3</div>
我想点下aa1，就显示aa1这个div,点下aa2就显示aa2这个层，如何做啊。我现在的程序在火狐下正常，在IE下出错。不兼容把，可能是。如何修改啊？

解决方案 »

  1.   

    IE6-OK<body>
    <script> 
    function aa1show(){ 
    a1 = document.getElementById('aa1'); 
    a2 = document.getElementById('aa2'); 
    a3 = document.getElementById('aa3'); 
    a1.style.display=''; 
    a2.style.display='none'; 
    a3.style.display='none'; 
    } function aa2show(){ 
    a1 = document.getElementById('aa1'); 
    a2 = document.getElementById('aa2'); 
    a3 = document.getElementById('aa3'); 
    a1.style.display='none'; 
    a2.style.display=''; 
    a3.style.display='none'; 
    } 
    </script> 
    <a onclick="aa1show()">aa1 </a>
    <a onclick="aa2show()">aa2 </a>
    <hr> 
    <div id="aa1" style="display:''">aa1 </div> 
    <div id="aa2" style="display:none">aa2 </div> 
    <div id="aa3" style="display:none">aa3 </div>
     
    </body>
      

  2.   

    默认值的问题吧。
    把想显示的层均改为如下代码：
    a1.style.display=''; 改为 a1.style.display='block'; 
    a2.style.display=''; 改为 a2.style.display='block'; 
      

  3.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head><body>
    <script>
    function aa1show(){
     
    a1 = document.getElementById('aa1');
    a2 = document.getElementById('aa2');
    a3 = document.getElementById('aa3');
    a1.style.display='';
    a2.style.display='none';
    a3.style.display='none';
    }function aa2show(){
     
    a1 = document.getElementById('aa1');
    a2 = document.getElementById('aa2');
    a3 = document.getElementById('aa3');
    a1.style.display='none';
    a2.style.display='';
    a3.style.display='none';
    }
    </script><div id="aa1" style="display:''"><a onclick="aa2show()">aa1 </a> </div>
    <div id="aa2" style="display:none"><a onclick="aa1show()">aa2 </a> </div>
    <div id="aa3" style="display:none">aa3 </div> 
    </body>
    </html>