div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白
style="visibility: none;"
document.getElementById("typediv1").style.visibility="hidden";//隐藏
document.getElementById("typediv1").style.visibility="visible";//显示
通过设置display属性可以使div隐藏后释放占用的页面空间如下
style="display: none;"
document.getElementById("typediv1").style.display="none";//隐藏
document.getElementById("typediv1").style.display="";//显示
此JS代码中，没有用try——Catch捕获错误，代码如下：
<script language="javascript">
//创建一个showhidediv的方法，直接跟ID属性
function showhidediv(id){
var sbtitle=document.getElementById(id);
if(sbtitle){
if(sbtitle.style.display=='block'){
sbtitle.style.display='none';
}else{
sbtitle.style.display='block';
}
}
}
</script>
<div id="show" onMouseMove='showhidediv("msg")';>鼠标移动这里</div><!--这里是点击div，ID要下面的ID-->
<div id="msg" style="display:none;">出现显示的内容</div> <!--这里是MsgDiv-->
onMouseMove='showhidediv("msg")'; 这里是鼠标动作，可以替换成Click或其他！
做两个层之间的切换：
<script language="javascript">
//创建一个showhidediv的方法，直接跟ID属性
function showhidediv(id){
var age=document.getElementById("msg_2");
var name=document.getElementById("msg_1");
if (id == 'name') {
if (name.style.display=='none') {
age.style.display='none';
name.style.display='block';
}
} else {
if (age.style.display=='none') {
name.style.display='none';
age.style.display='block';
}
}
}
</script>
<div id="show" style="float:left;" onMouseMove='showhidediv("name")';>Name：</div><div id="show" style="float:left;" onMouseMove='showhidediv("age")';>Age：</div>
<div id="msg_1" style="display:none;float:left;">林雨林</div>
<div id="msg_2" style="display:none;float:left;">18</div>
//示例二
显示一个层的同时隐藏另一个层
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function showhidediv(id){
var age=document.getElementById("msg_2");
var name=document.getElementById("msg_1");
if (id == 'name') {
if (name.style.display=='none') {
age.style.display='none';
name.style.display='block';
}
} else {
if (age.style.display=='none') {
name.style.display='none';
age.style.display='block';
}
}
}
-->
</script>
</script>
</head>
<body>
<div id="msg_1" style="display:block;float:left;" onclick='showhidediv("age")';>
<p id="photoTitle" >单击此处添加描述</p></div>
<div id="msg_2" style="display:none;float:left;" >
<form id="">
<textarea class="textarea" id="" name=""></textarea>
<div class="">
<input type="button" value="保存" class="" id="">
<input type="button" value="取消" class="" id="" onclick='showhidediv("name")';>
</div>
<input type="hidden" name="" value=""></form>
</div>
</body>
</html>
分享到：
相关推荐
3. 在mousemove事件中，利用之前记录的位置差值来动态更新div的top和left属性，实现拖动效果。 4. 在mouseup事件中停止拖动效果，防止div继续移动。 以上知识点涵盖了从基础的CSS样式设置到复杂的jQuery事件监听...
首先，我们需要隐藏所有内容面板，然后默认显示第一个。这可以通过CSS样式或jQuery的`.hide()`和`.show()`方法来完成： ```javascript $(".tab-content").hide(); $("#tab1").show(); ``` 接下来，我们需要监听每...
在Vue.js中，实现鼠标经过动画可以通过监听`@mouseenter`和`@mouseleave`这两个事件来完成，同时结合CSS3的过渡效果（transition）和动画（animation）来改变元素的样式，从而达到动态视觉效果。以下将详细介绍这个...
"jQuery 通用Tab切换效果"就是利用jQuery这个强大的JavaScript库实现的一种高效且灵活的Tab组件。jQuery简化了DOM操作，使得创建这种效果变得简单易行。 首先，jQuery的核心在于它的选择器，它可以方便地选取HTML...
描述中提到“js操作div仿title提示信息效果”，意指利用JavaScript来操作div元素，使其在鼠标悬停时显示为类似于title的效果。通过在div元素上绑定鼠标事件（如onmouseover和onmouseout），可以实现当鼠标停留在元素...
通常我们使用JavaScript来实现二级菜单的动态显示和隐藏，但其实CSS同样可以胜任这一任务，无需依赖额外的脚本语言。这个例子就展示了如何仅通过CSS实现二级菜单的动态效果。 首先，我们来看HTML结构。这里有一个`...
3. 功能控制：通过JavaScript，我们可以控制客服对话框的显示和隐藏，以及用户输入的验证和处理。 最后，CSS（层叠样式表）用于美化网页，为在线客服系统提供视觉效果。在这个案例中，CSS可以做到以下几点： 1. ...
接下来，我们要考虑提示的显示和隐藏效果。jQuery的动画功能可以帮助我们实现类似安卓原生的滑入滑出效果。例如，我们可以使用`fadeIn()`和`fadeOut()`方法： ```javascript dialog.fadeIn('slow'); // 慢速滑入 ...
总结来说，这个JavaScript百叶窗动画实现利用了HTML元素（如div）和CSS样式来创建可交互的视觉效果。JavaScript通过控制这些元素的位置和可见性，模拟了动画过程。这种方法不仅提供了一种替代Flash的方式，还具有更...
"jQuery 屏幕上方滑动层"是指利用jQuery技术实现的一种用户界面效果，通常用于创建在页面顶部显示的可滑动或可折叠的通知、菜单或者信息框。这种设计模式可以吸引用户的注意力，同时不干扰主要内容的浏览。 在描述...
"的描述表明我们将讨论如何利用JavaScript这一强大的客户端脚本语言来创建这种效果。JavaScript允许我们动态地操作DOM（文档对象模型），从而在用户与网页交互时呈现出丰富的视觉反馈。 首先，让我们理解弹出窗口的...
本教程将深入探讨如何利用原生JavaScript来实现一个功能完备的轮播图组件，无需依赖任何外部库，真正做到“开箱即用”，并且具有自动播放、左右切换以及小圆点导航功能，方便进行二次开发。 首先，我们需要创建HTML...
手风琴特效的基本原理是通过控制内容区域的显示和隐藏，模拟出一种收缩和展开的效果。在淘宝网商品展示中，每个商品都是一个手风琴项，点击后展开详细信息，再次点击则收回，保持页面的整洁。 1. **HTML 结构**：...
本教程将详细讲解如何利用jQuery实现一个人才网上的弹出层选择工作地区特效，这对于提升用户体验和网站互动性至关重要。 首先，让我们了解jQuery的核心概念。jQuery通过提供一套简洁的API，使得开发者可以更方便地...
此外，我们可能还需要隐藏某些元素在打印时不显示，比如预览和打印按钮。这可以通过CSS媒体查询实现，定义只在打印时生效的样式： ```css @media print { .noprint { display: none; } } ``` 或者： ```css ....
它利用了jQuery的选择器、DOM操作、事件处理和动画方法，以及CSS的布局和过渡效果，为用户提供了一种流畅、直观的图片浏览方式。这种技术广泛应用于产品展示、轮播图等多种场景，是现代网页设计中的常见技巧。
<script type="text/javascript" src="path/to/jquery-1.7.1.min.js"> ``` 如果你选择这种方法，确保将`path/to`替换为jQuery库文件的实际路径。 2. 直接引用在线CDN（内容分发网络）上的jQuery库。这可以提高...