`

用javascript控制div的显示与隐藏

JavaScriptCSSHTML 
阅读更多
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function toggle(targetid){
    if (document.getElementById){
        target=document.getElementById(targetid);
            if (target.style.display=="block"){
                target.style.display="none";
            } else {
                target.style.display="block";
            }
    }
}
-->
</script>
<style type="text/css">
<!--
#div1{
background-color:#000000;
height:400px;
width:400px;
display:none;
}
-->
</style>
</head>

<body>
<input type="button" id="butn" value="显示/隐藏" onclick="toggle('div1')" />
<center>
<div id="div1"></div></center>
居中的DIV
</body>
</html>
 
分享到：
| Java基本概念：集合类 List/Set/Map... 的 ...
评论
发表评论

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

相关推荐

    ajax控制div窗口显示和隐藏

    三、Ajax控制Div显示 要使用Ajax来控制div的显示，首先需要在JavaScript中创建一个Ajax请求。在接收到服务器响应后，根据返回的数据决定是否显示或隐藏特定的div。例如，服务器可能返回一个JSON对象，其中包含一个...

    Div显示与隐藏网页制作

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

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

    总之，掌握 `onclick` 事件及其在控制 `div` 显示隐藏中的应用是前端开发的基础，这有助于创建更具交互性的网页。同时，熟悉源码阅读和开发者工具的使用，能帮助开发者更好地理解代码逻辑，定位并解决问题。

    javascript实现显示和隐藏div方法汇总

    在JavaScript中，显示和隐藏`div`元素是前端开发中常见的需求。本篇文章将汇总15种不同的方法来实现这一功能。以下是对这些方法的详细解释： 1. **`display: block/none`**： - `display: block`使元素呈现在页面...

    网页设计div的显示和隐藏

    ### 网页设计中的div显示与隐藏技术详解 在网页设计中，div元素作为最基本的容器之一，被广泛应用于布局、样式控制等多个方面。而如何有效地控制div元素的显示与隐藏，则是实现交互式设计的重要手段之一。本文将...

    div显示隐藏效果

    总之，`div`的显示隐藏效果是前端开发中的基本技巧，它涉及到HTML、CSS和JavaScript的综合运用。掌握这一技能可以帮助开发者更好地控制网页的交互性和用户体验。通过不断学习和实践，你可以创造出更多富有创意的显示...

    javascript DIV隐藏、显示 弹出式窗口样式

    在这个场景中，我们关注的是如何利用JavaScript控制HTML中的`&lt;div&gt;`元素，以及如何实现弹出式窗口的样式。 首先，`&lt;div&gt;`是HTML中的一个通用容器元素，常用于组织页面布局或封装其他元素。在JavaScript中，我们可以...

    JS实现各种动态显示隐藏div效果

    总结起来，JS结合CSS提供了丰富的可能性来实现div的动态显示隐藏效果。通过巧妙地控制时间和动画曲线，可以创建出各种吸引人的用户界面。实践中，还可以结合CSS3的`animation`属性和JS的事件监听来实现更复杂的交互...

    javascript学习笔记（1） 缓动效果显示隐藏div

    以上就是使用JavaScript实现缓动效果来控制div显示隐藏的基本原理和步骤。在实际开发中，你还可以结合CSS3的transition和animation属性，或者使用现有的库如jQuery或GSAP，以更高效、更简洁的方式实现类似效果。不过...

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

    &lt;title&gt;ASP.NET显示隐藏示例 &lt;script type="text/javascript"&gt; function toggleDiv() { var div1 = document.getElementById('&lt;%= div1.ClientID %&gt;'); var div2 = document.getElementById('&lt;%= div2.ClientID...

    Div显示隐藏

    在网页设计和开发中，`div` 是一个非常基础且...在实际项目中，还可以考虑使用 JavaScript 或者现代前端框架（如 React、Vue 或 Angular）来实现更为复杂的交互逻辑，但基本原理仍然是基于 `div` 元素的显示与隐藏。

    隐藏与显示事件

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

    javascript操作DIV总结（弹出窗口篇）

    在JavaScript中，可以创建一个新的`&lt;div&gt;`作为弹出层，并设置其样式使其位于其他元素之上，通过CSS的`display`属性控制显示和隐藏。例如： ```javascript var dialog = document.getElementById('dialog'); dialog....

    Javascript实现div对话框效果

    接下来，我们利用JavaScript来控制对话框的显示与隐藏。这里可以使用DOM操作方法，如`getElementById()`获取DOM元素，然后通过`style.display`属性改变其可见性。以下是一个简单的示例： ```javascript function ...

    js实现多div的显示和隐藏

    下面是一个简单的例子，展示了如何用JavaScript控制单个div的显示和隐藏： ```html &lt;div id="content1"&gt;这是内容1&lt;/div&gt; ('content1')"&gt;切换显示 function toggleVisibility(id) { var element = document....

    JS做的隐藏与显示DIV可拖动弹出层

    总的来说，这个实例提供了关于`div`层操作和JavaScript交互的一个基础应用，可以帮助开发者了解如何用JavaScript来控制网页元素的显示、隐藏和拖动，提升用户的交互体验。通过实践和理解这个例子，你可以进一步掌握...

    鼠标经过显示隐藏div

    ### 鼠标经过显示隐藏div - JavaScript与CSS结合实现 在Web开发中，通过JavaScript（简称JS）和CSS结合可以实现很多动态效果，其中“鼠标经过显示隐藏div”就是一个非常实用的功能。本文将详细解析如何利用这些技术...

    javascript 控制 html元素 显示/隐藏实现代码

    本文将详细介绍如何使用JavaScript来实现HTML元素的显示与隐藏，并提供两种不同的方法来控制页面控件的显示状态。 首先，我们要清楚HTML元素在默认情况下通过CSS的display属性来控制其是否显示。display属性可以是...

    精美的div隐藏与显示

    在这个“精美的div隐藏与显示”的主题中，我们将探讨如何使用JavaScript（特别是jQuery库）来实现`div`元素的动态效果，如滑动、淡入淡出以及隐藏和显示。 首先，让我们关注jQuery库。jQuery是一个轻量级的...

    JS显示隐藏DIV(动画效果)

    在网页开发中，JavaScript（JS...总结，JavaScript显示隐藏DIV的动画效果涉及到DOM操作、CSS样式控制、定时器函数以及可能的浏览器兼容性处理。这种技术在现代网页设计中广泛使用，可以显著提升用户与网页的互动体验。

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