onclick事件实现div显示与隐藏的代码

发布时间:2020-07-22编辑:脚本学堂
本文介绍下,使用html的onclick事件,实现div的显示与隐藏,代码很简单,特别适合初学的朋友参考。

代码如下:
 

复制代码 代码示例:
<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 <title>IE BUG - table position & select div的显示隐藏_www.jb200.com</title> 
 
<script> 
  function showDiv(){  
var tbox=document.getElementById("tbox");  
tboxtbox.style.display = tbox.style.display=="none"?"":"none";  
 }  
</script> 
 
<style> 
 
.badtable {  
width: 200px;
height:100px;  
 
background-color: #f0f0f0;  
 
position: relative;  
}  
 
</style> 
 </head> 
 
 <body> 
 
  <input onclick="showDiv()" type="button" value="show/hide" /> <br/> 
<div id="tbox" > 
<select> 
<option>我是一个select</option> 
</select>
  <table class="badtable" border="1" > 
   <tr> 
 <td >表格内容1</td> 
</tr> 
  </table> 
 </div>
其他内容1<br/> 
其他内容2<br/> 
其他内容3<br/> 
其他内容4<br/> 
 </body> 
</html> 

点击 show/hide 按钮后,  
div ccc 被隐藏, 里面的内容也被隐藏, 但是table 却还显示(里面的td也已经隐藏了)  
 
解决办法一:  
把是 table样式里的 "position: relative;"去掉 (positiond 等于 absolute 也不行)  
 
解决方法二:  
改那个 tbox的div 也加上 "position: relative;"  
 
解决方法三:  
把那个 select 去掉,这个问题也不会出现  
 
解决方法四:  
把那个 select 放到table后面,这个问题也不会出现。