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>这一段代码，为什么在点第一个和第二、三、四个效果不一样呢，哪里出错了

解决方案 »

  1.   

    ie8 fx3.6效果一样，不清楚楼主说的不一样在那里- -!
      

  2.   

    给你修改好了，看是不是这个效果，主要是最外层的div和内层的div宽度一样，所以在处理的时候产生了类似溢出，把最外层div扩大一点就没这个问题了<!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>
      

  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 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>