控制div显示与隐藏的问题

<table>
<tr>
<td >
<div id="area_code" >
<input name="area_code" type="text" id="area_code" size="8" />
<input name="bts_code" type="text" id="bts_code" size="8" />
</div>
</td>
<td ><div id="rnp" ><input name="rnp" type="text" id="rnp" /></div></td>
<td ><img src="images/pol123.gif" onclick=""/></td>
</tr>
</table>有这样两个td，需求如下：
默认出现第一个div，在点击图片的时候，第一个消失，出现第二个div
再次点击图片，第二个div的内容消失，还原第一个div-----------------------------------------------------------------
我写的不对，实现不了，郁闷：
   <script language=JavaScript>   
function   elementDisplay(tbox,area_code){ 
      var div = document.getElementById('rnp');
  var divs = document.getElementById('area_code');
      if(div.style.visibility == 'hidden'){
         div.style.visibility = '';
 divs.style.visibility = 'hidden';
      }else{
        div.style.visibility = 'hidden';
divs.style.visibility = '';
      }
}  </script>
<table>
<tr>
<td >
<div id="area_code" >
<input name="area_code" type="text" id="area_code" size="8" />
<input name="bts_code" type="text" id="bts_code" size="8" />
</div>
</td>
<td ><div id="rnp" style="visibility:hidden"><input name="rnp" type="text" id="rnp" /></div></td>
<td ><img src="images/pol123.gif" onclick="elementDisplay();" /></td>
</tr>
</table>
各位大虾帮忙看看吧！严重感谢！

解决方案 »

  1.   

    晕，js代码写错了，诶，可以了
    <script language=JavaScript>   
    function   elementDisplay(rnp,area_code){ 
          var div = document.getElementById('rnp');
      var divs = document.getElementById('area_code');
          if(div.style.visibility == 'hidden'){
             div.style.visibility = '';
     divs.style.visibility = 'hidden';
          }else{
            div.style.visibility = 'hidden';
    divs.style.visibility = '';
          }
    }  </script>
      

  2.   


    <script type="text/javascript">
    function elementDisplay(tbox, area_code){
    var div1 = document.getElementById('rnp');
    var div2 = document.getElementById('area_code');
    if (div1.style.visibility == 'hidden') {
    div1.style.visibility = '';
    div2.style.visibility = 'hidden';
    } else {
    div1.style.visibility = 'hidden';
    div2.style.visibility = '';
    }
    }
    </script>
    <table>
    <tr>
    <td><div id="area_code">
    <input name="area_code" type="text" size="8" />
    <input name="bts_code" type="text" size="8" />
    </div></td>
    <td><input type="text" id="rnp" style="visibility:hidden" /></td>
    <td><img src="images/pol123.gif" onclick="elementDisplay();"/></td>
    </tr>
    </table>
      

  3.   

    <table>
    <tr>
    <div id="area_code" >
    <td>按照区域代码填写</td>
    <td >
    <input name="area_code" type="text" id="area_code" size="8" />
    <input name="bts_code" type="text" id="bts_code" size="8" />
    </td>
    </div>
    <div id="rnp" >
    <td>按照基站RNP填写</td>
    <td ><div id="rnp" ><input name="rnp" type="text" id="rnp" /></td>
    </div>
    <td ><img src="images/pol123.gif" onclick=""/></td>
    </tr>
    </table>
    但是这样又不行了，无法控制td，只能控制td里面的内容
    有没有什么办法实现把td也控制了呢
      

  4.   

    LZ关键不要重复使用id就好了，你要控制td就加个id好了
      

  5.   

    <!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 runat="server">      <script src="scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
        <script src="scripts/jquery-1.3.2.js" type="text/javascript"></script>    <title>无标题页</title>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <div id="area_code">
                        <input name="area_code" type="text" id="area_code" size="8" />
                        <input name="bts_code" type="text" id="bts_code" size="8" />
                    </div>
                </td>
                <td>
                    <div id="rnp">
                        <input name="rnp" type="text" id="rnp" />
                    </div>
                </td>
                <td>
                    <img src="images/pol123.gif" onclick="" />
                </td>
            </tr>
        </table>    <script type="text/javascript">
            $("div#area_code").show();
            $("div#rnp").hide();
            $("img").click(function(){
                $("div#area_code").toggle();
                $("div#rnp").toggle();
            });
        </script></body>
    </html>