<!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>js显示隐藏层</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function showDiv(_Id,obj){
var Target=document.getElementById(_Id);
var clickText=document.getElementById(obj)
if (Target.style.display=="block"){
Target.style.display="none";
clickText.innerText="+";//变回+
} else {
Target.style.display="block";
clickText.innerText="-";//变回-
}
}
-->
</script>
<style type="text/css">
<!--
body { font: normal 14px "宋体" }
a { text-decoration: none; }
#showtext1 { cursor: hand; cursor:pointer;}
#showtext2 { cursor: hand; cursor:pointer;}
#contentId { margin-top: 10px; width:100%; border: 1px solid #CCC; background: #F1F1F1; padding: 15px; }
#contentId2 { margin-top: 10px; width: 470px; border: 1px solid #CCC; background: #F1F1F1; padding: 15px; }
.none { display: none; }
-->
</style>
</head>
<body>
<a id="showtext1" onClick="showDiv('contentId','showtext1')">+</a>
<div id="contentId" class="none">打开的内容</div>
<p></p>
<a id="showtext2" onClick="showDiv('contentId2','showtext2')">+</a>
<div id="contentId2" class="none">打开的内容</div>
<p></p>
</body>
</html>
分享到：
相关推荐
在"JS做的隐藏与显示DIV可拖动弹出层"这个实例中，我们将探讨如何利用JavaScript来创建一个可拖动的弹出层，并控制其显示与隐藏。 首先，让我们理解`div`层的隐藏与显示。在HTML中，我们创建一个`div`元素并为其...
在"Div显示与隐藏网页制作"这个主题中，我们将探讨如何利用`Div`实现网页元素的动态显示和隐藏，这对于创建交互式和响应式的网页至关重要。 在网页设计中，有时我们需要根据用户的行为或者特定条件来控制某些内容的...
在本主题中，我们将深入探讨如何利用 `div` 实现“鼠标放到文字上显示隐藏的 `div`”这一交互效果。 首先，我们需要创建两个 `div` 元素，一个用于显示文字，另一个用于隐藏的内容。假设我们有以下 HTML 结构： ``...
这种技术的核心是利用事件监听器来捕捉鼠标的移动，并根据鼠标的移动来控制div元素的显示与隐藏。在本案例中，"js鼠标浮动显示div"指的是当鼠标移动到特定的input元素上时，会显示出一个div层，该div层中包含有与...
在JavaScript中，控制层的隐藏和显示是网页交互性中的基本操作，广泛应用于各种功能，如弹出框、菜单、提示信息等。本主题主要涉及两种实现方式：点击事件触发和鼠标移动事件触发。 首先，我们来探讨点击事件触发的...
在JavaScript中，显示和隐藏`div`元素是前端开发中常见的需求。本篇文章将汇总15种不同的方法来实现这一功能。以下是对这些方法的详细解释： 1. **`display: block/none`**： - `display: block`使元素呈现在页面...
<title>ASP.NET显示隐藏示例 <script type="text/javascript"> function toggleDiv() { var div1 = document.getElementById('<%= div1.ClientID %>'); var div2 = document.getElementById('<%= div2.ClientID...
通过以上步骤，我们可以实现一个简单的鼠标悬停显示隐藏层的功能。这种效果不仅适用于展示商品详情、帮助提示等场景，还能提升用户体验。此外，还可以进一步优化代码，比如使用现代的JavaScript方法（如`...
### 网页设计中的div显示与隐藏技术详解 在网页设计中，div元素作为最基本的容器之一，被广泛应用于布局、样式控制等多个方面。而如何有效地控制div元素的显示与隐藏，则是实现交互式设计的重要手段之一。本文将...
在网页设计和开发中，交互性是提升用户体验的关键因素之一，而“完美的鼠标放上去jquery显示隐藏层”正是实现这种交互效果的一种技术手段。这个标题所指的是一种使用JavaScript库jQuery来实现在鼠标悬停（hover）时...
CSS用于定义`DIV`的样式，包括初始的隐藏状态和动画效果，而JavaScript则负责控制`DIV`的显示和隐藏逻辑。 在这个案例中，`index.html`文件可能包含了一个HTML结构，其中有一个`DIV`元素作为弹出层。这个`DIV`可能...
3. **JavaScript控制**：最后，利用JavaScript来动态调整遮罩层的尺寸，确保其能够适应不同分辨率的屏幕。同时，也可以添加事件监听器来控制遮罩层的显示与隐藏。 ```javascript function showMask() { var mask ...
在网页设计中，"js控制层和DIV+CSS实现TAB菜单"是一个常见的技术组合，用于创建交互式的用户界面。这个主题涉及到JavaScript（JS）、层（Layer）管理、Div（CSS布局元素）以及CSS（级联样式表）的使用。下面我们将...
在这次的实例中，JavaScript将用于控制弹出窗的显示和隐藏，以及处理用户与弹出窗的交互。 DWR是Direct Web Remoting的缩写，它允许Web应用在客户端和服务器之间进行异步通信，就像它们都在同一进程中一样。DWR使...
CSS控制DIV层显示和隐藏的知识点可以分为以下几个方面： 一、CSS控制元素显示和隐藏的两种属性 在CSS中，控制元素显示和隐藏主要有两个属性：display和visibility。 1. display属性： display属性用来设置或检索...
在模块显示隐藏中，JS 可以通过修改元素的`display`属性（如切换 between `none` 和 `block`）来控制元素的可见性。在换肤功能中，JS 可能用于加载不同的CSS文件或者修改元素的样式来改变整体外观。 **CSS (层叠...
"显示隐藏层与弹出菜单JS"这个主题主要涉及到如何利用JavaScript来控制页面元素的可见性，以及创建弹出式菜单。这里我们将深入探讨这两个概念。 **显示隐藏层** 在网页设计中，隐藏层通常用于存储一些非初始显示但...
在网页设计中，我们经常利用CSS将`<div>`元素设置为隐藏状态，然后通过JavaScript或jQuery等库将其在需要时显示出来，形成弹出层效果。弹出层通常用于显示详细信息、表单、提示信息等，它不会干扰到页面的主内容，但...
接下来，我们需要编写JavaScript代码来控制弹出窗口的显示和隐藏。这通常在单独的`<script>`标签内或者外部的JS文件（如`script.js`）中完成。以下是一个简单的JavaScript函数示例： ```javascript function show...
对于JavaScript部分，主要任务是控制弹出层的显示和隐藏。这可以通过改变`div`的`display`属性来完成。例如，当用户点击某个按钮时，通过JavaScript函数来切换`div`的`display`值，从`none`变为`block`或反之。此外...