javastript 隐藏与显示

<!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>
<div style="width:500px; height: 2000px; ">
<div style="width: 500px; height: 50px; background:red; float: left;" id="div1"></div>
<div style="width: 500px; height: 20px; background: #0F0; float: left;">
<a href="#" onclick="javascript:document.getElementById('div1').style.display = (document.getElementById('div1').style.display=='none') ? '' : 'none';document.getElementById('div2').style.height = (document.getElementById('div1').style.display=='none') ? '100px' : '50px';">第一个</a></div>
<div style="width: 500px; height: 50px; background:yellow;float: left;" id="div2"></div><div style="width: 500px; height: 50px; background:red; float: left;" id="div3"></div>
<div style="width: 500px; height: 20px; background: #0F0; float: left;">
<a href="#" onclick="javascript:document.getElementById('div3').style.display = (document.getElementById('div3').style.display=='none') ? '' : 'none';document.getElementById('div4').style.height = (document.getElementById('div3').style.display=='none') ? '100px' : '50px';">第二个</a></div>
<div style="width: 500px; height: 50px; background:yellow;float: left;" id="div4"></div><div style="width: 500px; height: 50px; background:red; float: left;" id="div5"></div>
<div style="width: 500px; height: 20px; background: #0F0; float: left;">
<a href="#" onclick="javascript:document.getElementById('div5').style.display = (document.getElementById('div5').style.display=='none') ? '' : 'none';document.getElementById('div6').style.height = (document.getElementById('div5').style.display=='none') ? '100px' : '50px';">第三个</a></div>
<div style="width: 500px; height: 50px; background:yellow;float: left;" id="div6"></div><div style="width: 500px; height: 50px; background:red; float: left;" id="div7"></div>
<div style="width: 500px; height: 20px; background: #0F0; float: left;">
<a href="#" onclick="javascript:document.getElementById('div7').style.display = (document.getElementById('div7').style.display=='none') ? '' : 'none';document.getElementById('div8').style.height = (document.getElementById('div7').style.display=='none') ? '100px' : '50px';">第四个</a></div>
<div style="width: 500px; height: 50px; background:yellow;float: left;" id="div8"></div>
</div>
</body>
</html>
这段代码，在IE6内核系的遨游、腾讯tt运行不正常，在火狐，IE8运行正常，这是为什么
就是在点击"第一个"和第二、三、四个会出现不同的效果

解决方案 »

  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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
     function changeStyle(div1,div2){
    document.getElementById(div1).style.display = (document.getElementById(div1).style.display=='none') ? '' : 'none';
    document.getElementById(div2).style.height = (document.getElementById(div1).style.display=='none') ? '100px' : '50px';
     }
    //-->
    </script>
    <div style="width:600px; height: 2000px;  background:#fff;">
    <div style="width: 500px; height: 50px; background:red; float: left;" id="div1"></div>
    <div style="width: 500px; height: 20px; background: #0F0; float: left;">
    <a href="#" onclick="changeStyle('div1','div2');">第一个</a></div>
    <div style="width: 500px; height: 50px; background:yellow;float: left;" id="div2">a</div><div style="width: 500px; height: 50px; background:red; float: left;" id="div3">b</div>
    <div style="width: 500px; height: 20px; background: #0F0; float: left;">
    <a href="#" onclick="changeStyle('div3','div4');">第二个</a></div>
    <div style="width: 500px; height: 50px; background:yellow;float: left;" id="div4">c</div><div style="width: 500px; height: 50px; background:red; float: left;" id="div5">d</div>
    <div style="width: 500px; height: 20px; background: #0F0; float: left;">
    <a href="#" onclick="changeStyle('div5','div6');">第三个</a></div>
    <div style="width: 500px; height: 50px; background:yellow;float: left;" id="div6">e</div><div style="width: 500px; height: 50px; background:red; float: left;" id="div7">f</div>
    <div style="width: 500px; height: 20px; background: #0F0; float: left;">
    <a href="#" onclick="changeStyle('div7','div8');">第四个</a></div>
    <div style="width: 500px; height: 50px; background:yellow;float: left;" id="div8">g</div>
    </div>
    </body>
    </html>
      

  2.   

    好像是这个样子的，但外层div只要加３个像素就可以了好像