`

onclick事件实现div的隐藏和显示

IEHTML 
阅读更多

在IE内( 6 7 都一样) 运行下面代码 ,代码可以从附件里下载

(大家可以看一下 dom结构多么的简单啊)

Html代码 复制代码
  1. <html>  
  2.  <head>  
  3.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  4.  <title>IE BUG ---- table position & select </title>  
  5.   
  6. <script>  
  7.   function showDiv(){   
  8.     var tbox=document.getElementById("tbox");   
  9.     tboxtbox.style.display = tbox.style.display=="none"?"":"none";   
  10.  }   
  11. </script>  
  12.   
  13. <style>  
  14.   
  15. .badtable {   
  16.     width: 200px;    
  17.     height:100px;   
  18.   
  19.     background-color: #f0f0f0;   
  20.   
  21.     position: relative;   
  22. }   
  23.   
  24. </style>  
  25.  </head>  
  26.   
  27.  <body>  
  28.   
  29.   <input onclick="showDiv()" type="button" value="show/hide" /> <br/>  
  30.   
  31.   
  32. <div id="tbox" >  
  33.   
  34.   
  35.     <select>  
  36.         <option>我是一个select</option>  
  37.     </select>    
  38.   
  39.        
  40.       <table class="badtable" border="1" >  
  41.        <tr>  
  42.          <td >表格内容1</td>  
  43.         </tr>  
  44.       </table>  
  45.        
  46.   
  47.   
  48.  </div>  
  49.   
  50. 其他内容1<br/>  
  51. 其他内容2<br/>  
  52. 其他内容3<br/>  
  53. 其他内容4<br/>  
  54.  </body>  
  55. </html>  
运行以上代码 
============================================= 
点击 show/hide 按钮后, 
div ccc 被隐藏, 里面的内容也被隐藏, 但是table 却还显示(里面的td也已经隐藏了) 

解决办法一: 
把是 table样式里的 "position: relative;"去掉 (positiond 等于 absolute 也不行) 

解决方法二: 
改那个 tbox的div 也加上 "position: relative;" 

★ 以上两种解决方案 还是有一点逻辑性,最多可以归结为 IE在处理 table的position时有bug. 
但是下面两个方案绝对让你吐血 

解决方法三: 
把那个 select 去掉,这个问题也不会出现 

解决方法四: 
把那个 select 放到table后面,这个问题也不会出现 

============================================= 
IE啊, 你可以让table不支持 position: relative; 
但是为什么一定要在 table的前面有select的时候才不支持呢 

IE 你太诡异了 (IE 6 和 7 都是一样的诡异) 
我彻底被你打败了 
=============================================
分享到：
| 实例讲解-整合iBATIS和Spring在WEB开发中 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js实现多div的显示和隐藏

    在网页设计中，我们经常需要控制多个div（文档对象模型中的一个元素）的显示和隐藏，以实现诸如选项卡、轮播图等效果。本文将详细讨论如何使用JavaScript实现多div的显示和隐藏，以及如何创建简单的选项卡功能。 ...

    Div显示与隐藏网页制作

    在"Div显示与隐藏网页制作"这个主题中，我们将探讨如何利用`Div`实现网页元素的动态显示和隐藏，这对于创建交互式和响应式的网页至关重要。 在网页设计中，有时我们需要根据用户的行为或者特定条件来控制某些内容的...

    div显示隐藏效果

    `div` 显示和隐藏效果是前端开发中的常见需求，可以用来控制用户界面的可见性，例如实现折叠菜单、弹窗或者动态加载内容等。在本教程中，我们将深入探讨如何在HTML和CSS中实现`div`的显示与隐藏效果。 首先，我们...

    ASPnet（C#）中的DIV的显示隐藏问题

    本文将深入探讨如何在ASP.NET中利用C#来实现DIV元素的显示与隐藏，并通过实际代码示例进行说明。 #### 一、为什么使用Panel而非DIV？ 在ASP.NET中，默认情况下并不支持直接操作HTML的`&lt;div&gt;`标签的可见性属性。这...

    隐藏与显示事件

    在标题“隐藏与显示事件”中，我们关注的是如何通过编程控制UI元素的可见性，使得用户能够根据需求查看或隐藏特定内容。这种技术在电子商务网站、应用程序和其他互动式平台中尤其常见，例如在描述中提到的场景：点击...

    DIV的显示和隐藏.pdf

    本主题主要探讨如何通过 JavaScript 来控制 `div` 的显示和隐藏，这对于创建交互式网页至关重要。 首先，我们可以看到一个简单的示例，通过 JavaScript 函数 `Layer_HideOrShow` 实现了 `div` 的切换显示。这个函数...

    DIV的显示和隐藏.docx

    总结来说，通过CSS的`display`和`visibility`属性，以及JavaScript的DOM操作，我们可以方便地控制网页上的`DIV`以及其他HTML元素的显示和隐藏，从而实现动态的交互效果。在实际开发中，这种控制方式广泛应用于下拉...

    javascript实现div的显示和隐藏的小例子

    标题中的“javascript实现div的显示和隐藏的小例子”是指通过JavaScript来控制HTML中div元素的可见性，这是前端开发中常见的交互效果。JavaScript是一种广泛使用的客户端脚本语言，它允许在用户与网页交互时动态更新...

    java web jsp 隐藏div（附源码）

    以下是一个简单的例子，展示如何使用JSP和JavaScript来隐藏和显示div： ```jsp ; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html&gt; 隐藏/显示Div示例 #myDiv { display: ${hidden ? 'none' : 'block'...

    打开和隐藏Div

    "打开和隐藏Div"是一个常见的交互功能，它允许用户按需显示或隐藏特定区域，从而优化用户体验并有效地管理页面空间。这种技术在创建响应式设计、折叠菜单、模态对话框等场景中尤其有用。下面我们将深入探讨如何实现...

    按钮显示和隐藏

    ### 按钮显示和隐藏知识点详解 #### 一、知识点概述 在Web开发中，按钮的显示与隐藏是常见的交互需求之一。本知识点主要围绕一个具体的HTML示例来讲解如何通过JavaScript实现按钮的显示与隐藏功能。示例代码通过...

    一点击图标div隐藏显示功能，js读取xml文件，以及iframe的用法的小示例

    在这个小示例中，我们将探讨三个主要的JavaScript技术：点击图标时隐藏或显示Div元素，读取XML文件，以及使用IFrame。下面将详细阐述这些知识点。 首先，我们来看“点击图标隐藏/显示Div功能”。在网页设计中，用户...

    div css显示对联带关闭代码.rar

    在这个"div css显示对联带关闭代码.rar"压缩包中，很显然包含了一个实现对联显示并带有关闭功能的JavaScript特效，同时使用CSS进行美化和控制。 对联通常是指在网页两侧平行显示的文本，就像传统的诗词对仗一样。在...

    JS实现表单中点击小眼睛显示隐藏密码框中的密码

    总结一下，通过结合HTML、CSS和JavaScript，我们可以实现一个用户友好的功能，让用户能够轻松查看或隐藏他们在密码框中输入的内容。这种方法提高了表单的交互性和安全性，因为用户在确认密码后可以立即隐藏它们，...

    用css_+_javaScript实现层的隐藏、显示切换.doc

    每个 `div` 内都包含一个链接，点击链接会触发 `onClick` 事件，调用 `goto` 函数，并传入相应的参数来切换层的显示状态。 此外，HTML代码还展示了更复杂的CSS布局示例，包括使用 `div` 创建的多列布局，以及使用 `...

    DIV折叠展开DIV折叠展开

    此函数用于实现页面中所有指定ID前缀为“DIV”的元素的显示或隐藏。具体实现如下： ```javascript function panall() { for (var i = 1; i ; i++) { var divElement = document.getElementById("DIV" + i); if ...

    用css + javaScript实现层的隐藏、显示切换.doc

    下面将详细解析如何使用CSS样式和JavaScript脚本来实现层的隐藏与显示切换。 #### 一、CSS样式设置 首先，我们需要定义两种不同的CSS类来控制元素的显示状态。一种用于使元素可见（即默认显示状态），另一种则用于...

    div模式窗口-div模式窗口

    - `show()`和`hide()`: 显示或隐藏`div`。 - `fadeIn()`和`fadeOut()`: 实现淡入淡出效果。 - `slideToggle()`: 滑动显示或隐藏`div`。 - `append()`和`prepend()`: 在`div`内部添加或预加载内容。 - `event ...

    打开DIV

    - `#fd` 定义了要显示或隐藏的 `div` 的基本样式，包括宽度、高度、背景色等，并且设置了 `overflow: hidden` 和 `position: absolute` 以实现动画效果。 - `.content` 类则为内部实际内容定义了一些基本样式。 ###...

Magicbox
Global site tag (gtag.js) - Google Analytics