点击页面任何地方，将div隐藏，除了指定位置外。下面代码的意思是：div的id为aa，点击除了aa以外的任何地方，都可以使aa隐藏。
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{border:1px solid #000; width:200px; height:200px; margin:10px; float:left}
#aa{background-color:#00FFFF}
</style>
</head>
<body>
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="aa">
<p>我是aa</p>
<table width="100%" border="0" bgcolor="#0000FF">
<tr>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">q</th>
<th scope="col">a</th>
</tr>
<tr>
<td>q</td>
<td>e</td>
<td>w</td>
<td>w</td>
<td>w</td>
</tr>
<tr>
<td>w</td>
<td>w</td>
<td>w</td>
<td>3</td>
<td>1</td>
</tr>
</table>
<p>我是aa</p>
</div>
<div id="d4">d3</div>
</body>
</html>
<script type="text/javascript">
document.onclick = hideAA;
function hideAA(e){
var src = e?e.target:event.srcElement;
do{
if(src.id =="aa") return;
src = src.parentNode;
}while(src.parentNode)
document.getElementById("aa").style.display = "none";
}
</script>
分享到：
相关推荐
jQuery实现点击除了特定div的页面其它地方，隐藏该div功能。 在触发DOM上的某个事件的时候会产生一个事件对象event，这个对象包含着所有与事件有关的信息，包括产生事件的元素、事件类型等相关信息，思路一中div的...
### jQuery 实现点击指定 div 外区域隐藏该 div #### 背景介绍 在 Web 开发中，经常需要处理用户交互事件，如点击、滑动等。其中一个常见的需求是当用户点击某个元素（比如一个下拉菜单）时，这个元素会展开；而当...
通过这种方式，我们可以实现一个优雅的交互效果，当用户点击页面任何位置时，指定的div元素会自动隐藏，而点击特定按钮时可以重新显示。这个功能在提升用户体验方面非常有用，特别是在移动设备上，可以节省屏幕空间...
要实现将div的滚动条滚动到指定位置，我们可以使用jQuery的`animate()`方法。`animate()`方法允许我们创建平滑的动画效果，包括改变滚动位置。下面是一个简单的示例代码： ```html <!DOCTYPE html> <title>...
今天，我们将探讨 ElementUI 滚动条点击 DOM 元素滚动到指定位置的实现细节。 ElementUI 滚动条 ElementUI 的滚动条组件是用来处理大型数据列表滚动的，它可以自动管理滚动条的显示和隐藏，并提供了许多实用的...
在这个“精美的div隐藏与显示”的主题中，我们将探讨如何使用JavaScript（特别是jQuery库）来实现`div`元素的动态效果，如滑动、淡入淡出以及隐藏和显示。 首先，让我们关注jQuery库。jQuery是一个轻量级的...
当 `display` 属性值为 `"none"` 时，元素将不占据任何空间，看起来像是隐藏了；而当其值为 `"block"`（默认值）或其他非 `"none"` 值时，元素会正常显示。 下面是一个简单的例子，展示了如何使用 `onclick` 实现 `...
在网页开发中，有时我们需要实现一个特定的功能，即当用户点击页面上的任意位置时，除了某个特定区域（如一个`div`元素）之外，隐藏一个指定的`div`元素。这个功能可以用于创建弹出框、菜单或者提示信息，使得用户在...
除了点击div外部隐藏div外，点击事件也可以用来显示或隐藏元素。在示例代码中，我们看到另一个方法是通过监听body元素上的点击事件来隐藏.class="bigPic"的div。在这个例子中，通过检查点击的目标元素是否有.class=...
标题“空白处点击关闭DIV层”涉及到的是网页交互设计中的一个常见需求，即通过点击页面上的空白区域来隐藏或关闭某个浮动的DIV层。在网页设计中，DIV元素常用于布局和内容组织，而实现这一功能通常是通过JavaScript...
本实例重点讲解如何利用jQuery来实现显示和隐藏DIV元素的功能，这对于网页内容的布局和交互性提升至关重要。下面将详细阐述这一过程。 首先，我们需要在HTML文档中引入jQuery库。这通常通过在`<head>`标签内添加一...
在这个小示例中，当用户点击图标时，会触发一个JavaScript函数，该函数负责显示或隐藏指定的Div。同时，这个示例还展示了如何利用JavaScript读取XML文件，以便获取和处理数据。最后，IFrame的使用展示了如何在当前...
在本文中，遮罩层被用于实现点击区域外弹出弹窗的效果。 在实现点击某区域以外弹出弹窗的过程中，关键的HTML结构包括一个触发区域（div），一个遮罩层（cover），以及弹窗本身（box）。这三个部分通过id属性被CSS和...
在网页开发中，有时我们需要实现一个功能，让用户能够打印页面上的特定区域，比如一个`div`元素。jQuery，作为一个广泛使用的JavaScript库，提供了方便的方法来实现这个需求。本篇文章将详细探讨如何使用jQuery来...
在`点击关闭div`的示例中，CSS可能用来设置div的显示效果，如位置、大小、颜色等，并可能对关闭按钮进行特定样式处理，使其更易于用户识别： ```css #closeable-div { position: absolute; top: 50px; right: 50...
总结起来，实现ASP.NET中打印指定div内容并清除页眉页脚的功能，主要是通过JavaScript操作DOM，创建隐藏iframe，将div内容复制到iframe，设置适当的CSS以隐藏默认的打印页眉和页脚，然后调用`window.print()`方法...
当一个 div 设置为浮动后，它会尽可能地向页面的左或右侧移动，直到它的外边缘碰到包含它的边框或者其他浮动元素的外边缘。这样，我们可以创建一个在页面两侧显示的广告栏。 例如，如果我们想要在左侧创建一个浮动...
这种方法是通过在`document`对象上绑定`click`事件处理器，当点击任何地方时，隐藏`div`。同时，我们需要在`div`及其子元素上绑定事件处理器，调用`stopPropagation`方法阻止事件冒泡，确保点击`div`时不会触发`...