`
雪馨25
  • 浏览: 130552 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

【javaWeb】显示和隐藏div

javaWebdiv 
阅读更多
一、效果展示
1、初始状态，效果
2、点击“显示或隐藏”连接，效果
3、再次点击“显示或隐藏”连接，效果
二、实现代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>显示隐藏div</title>
<script type="text/javascript">
function isShowSecond(firstId,secondId) {
var flag = document.getElementById(firstId).value;
if(flag == 'false'){
　 document.getElementById(secondId).style.display="";
document.getElementById(firstId).value="true";
}else{
document.getElementById(firstId).value="false";
document.getElementById(secondId).style.display="none";
}
}
</script>
</head>
<body>
<div style="width:150px;height：31px;border: 1px solid red;">
<input type="hidden" id="firstDiv "value="false" />
<a href="javascript:isShowSecond('firstDiv ','secondDiv ') " style="width:100px;height：31px; border: 1px solid red;">显示或隐藏
</a>
<div id="secondDiv " style="display: none; padding-left: 30px;">
<div style="width:100px;height：31px; border: 1px solid red;">
<a href="javascript:">二级div</a>
</div>
<div style="width:100px;height：31px; border: 1px solid red;">
<a href="javascript:">二级div2</a>
</div>
</div>
</div>
</body>
</html>
备注：
1、本示例未关注样式
2、彩色标注突出重点
分享到：
| 【javaWeb】div居中
评论
发表评论

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

相关推荐

    javawebjavaweb

    `&lt;div class="carousel-caption d-none d-md-block"&gt;`包含轮播图片的标题和描述，`d-none d-md-block`类使得在小屏幕设备上隐藏，而在中等及以上大小的屏幕上显示。 轮播图的切换效果可以通过JavaScript事件触发，...

    一款漂亮实用的OA系统左侧DIV+CSS菜单

    在这种菜单中，JavaScript可能被用来处理用户的点击事件，如展开、折叠菜单项，或者根据用户权限动态显示或隐藏某些菜单选项。 接下来，我们将详细探讨这三个关键技术点： 1. **HTML `div`元素**：`div`是HTML5中...

    javaWeb面试题1

    1. **CSS和Div的优势**： - **显示和内容分离**：CSS允许样式和HTML内容分离，使页面结构更清晰，易于维护。 - **搜索引擎优化**：CSS布局有利于搜索引擎爬虫抓取页面内容，提高网站在搜索结果中的排名。 - **可...

    javaweb开发,使用jqprint打印页面

    首先，`jqPrint`主要用于JavaScript环境中，它允许你选择一个DOM元素（如一个div或表格）并将其内容打印出来。这在网页设计中非常有用，因为它允许用户只打印他们需要的部分，而不是整个页面。使用`jqPrint`，你可以...

    JavaWeb03-Vue学习笔记

    v-if和v-show是两种常用的指令，用于根据条件来显示或隐藏HTML元素。v-if指令会根据条件来删除或添加HTML元素，而v-show指令则会根据条件来设置HTML元素的display样式。例如： `年轻人&lt;/span&gt;` 和 `年轻人&lt;/span&gt;`。...

    Web弹出框实例

    1. `alert()`：显示警告对话框，通常包含一条消息和一个“确定”按钮。例如： ```javascript alert("这是一个警告信息！"); ``` 用户点击“确定”后，对话框关闭，程序继续执行。 2. `prompt()`：用于向用户请求...

    浮动的广告

    例如，当广告滚动出视口时，可以添加一个效果使其淡入淡出，或者在用户滚动到特定位置时显示或隐藏广告。以下是一个简单的例子，使用jQuery库实现： ```javascript $(window).scroll(function() { var scrollTop =...

    最精简的代码实现首页幻灯片

    首先，引入jQuery库，然后编写JavaScript代码来控制幻灯片的显示与隐藏。以下是一个简单的实现： ```javascript $(document).ready(function() { var slideIndex = 0; showSlides(); function showSlides() { ...

    Struts2标签列表及说明

    * &lt;s:generator&gt;：和 &lt;s:iterator&gt; 标签一起使用 H： * &lt;s:head&gt;：在 &lt;head&gt;&lt;/head&gt; 里使用，表示头文件结束 * &lt;s:hidden&gt;：隐藏值 I： * &lt;s:i18n&gt;：加载资源包到值堆栈 * &lt;s:include&gt;：包含一个输出，servlet ...

    jQuery网页虚拟键盘点击输入文本效果

    1. **HTML结构**：创建一个隐藏的div元素作为虚拟键盘的容器，并在其中放置一系列按钮元素，每个按钮代表一个字符或功能键（如退格、回车等）。 2. **CSS样式**：通过CSS来定制虚拟键盘的外观，包括按钮的大小、...

    jquery学习笔记

    - `fadeIn()`, `fadeOut()`: 隐藏或显示元素的淡入淡出效果。 - `slideToggle()`: 滑动显示或隐藏元素。 - `animate()`: 自定义动画，可以控制元素的CSS属性变化。 ### 六、Ajax交互 jQuery简化了Ajax请求，使得...

    java弹出框效果

    首先，我们需要在HTML中定义一个隐藏的div作为弹出框内容。例如： ```html &lt;div id="dialog" class="hidden"&gt; 这是一个弹出框示例。 &lt;/div&gt; ``` 然后，通过jQuery调用jqModal插件，将这个div变为弹出框： ```...

    JAVA的Web打印方式（PageOffice、POI、jacob，html打印等）

    如果不想让报表div在界面中显示出来可以隐藏之。 例如，使用以下HTML代码可以实现报表打印： &lt;div id="printdiv" style="display:none;"&gt; ;"&gt; / your code / &lt;/div&gt; 使用以下JavaScript代码可以实现打印功能...

    点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码

    这个例子中，JavaScript 函数 `hid()` 负责处理弹出层和遮罩层的显示与隐藏。它获取了 `div1`（弹出层）和 `div2`（遮罩层）的引用，并直接修改它们的样式属性，如宽度、高度、位置和 `z-index`。`div1` 设置为绝对...

    iframe异步加载实现点击左边菜单加载右边内容实例讲解

    当用户点击按钮（#butten）时，会触发一个点击事件，该事件会显示隐藏的div（#hidden）并更改iframe的src属性，从而加载新的页面（2.htm）。 ```javascript $(function () { $("#butten").click(function () { $...

    网上书店.rar

    在这个网上书店项目中，JavaScript主要用于处理用户的交互行为，如搜索图书、添加到购物车、显示隐藏内容等。它可以通过事件监听器捕捉用户的操作，然后执行相应的函数，更新DOM（文档对象模型），实现实时反馈。...

    java dialog弹出层实例

    例如，使用`&lt;div&gt;`元素和CSS来定义对话框的样式，并使用JavaScript（可能结合jQuery库）处理显示和隐藏对话框的逻辑。 3. **AJAX与Dialog** - AJAX技术可以用来异步更新对话框的内容。当用户触发某个事件时，可以...

    鼠标提示框（简单的js特效）

    首先，我们需要创建HTML结构，包含一个目标元素和一个用于显示提示信息的div。例如： ```html &lt;!DOCTYPE html&gt; 鼠标提示框 .tooltip { display: none; position: absolute; background-color: #333; ...

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