<html>
<head>
<title>HTML元素的显示与隐藏控制</title>
<script type="text/javascript">
function showAndHidden1(){
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
if(div1.style.display=='block') div1.style.display='none';
else div1.style.display='block';
if(div2.style.display=='block') div2.style.display='none';
else div2.style.display='block';
}
</script>
</head>
<body>
<div>display：元素的位置不被占用</div>
<div id="div1" style="display:block; background:#eee;">DIV 1</div>
<div id="div2" style="display:none; background:#fcc">DIV 2</div>
<input type="button" onclick="showAndHidden1();" value="DIV切换" />
</body>
</html>

两个DIV的切换的更多相关文章

  1. 两个div叠加触发事件发生闪烁问题

    今天遇到一个问题,想实现一个功能: 当鼠标移到div1上的时候,会出现div2.出现时div2在div1的上面,div2在出现后发生闪烁的问题. 于是开始找问题根源,发现原来是因为当我们触发div1的 ...

  2. 两个div横向排列，顶端对齐的方式。

    1.左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整. <!DOCTYPE html PUBLIC "-//W3C/ ...

  3. 一个页面两个div（一个柱状图或者折线图一个饼图）

    需求是一个页面中两个图,一个饼图一个折线图,接口用的是一个接口,柱状图的图例要隐藏掉,X轴为月份,每月份都有两个数据,也就是图例是两个(进口和出口)的意思饼图需要显示最新月份数据,并且有一个下拉框可以 ...

  4. div+css:两个div并排等高 (table-cell)

    两个div并排等高 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  5. 如何让两个div在同一行显示?一个float搞定

    最近在学习div和css,遇到了一些问题也解决了很多以前以为很难搞定的问题.比如:如何让两个div显示在同一行呢?(不是用table表格,table对SE不太友好)其实,<div> 是一个 ...

  6. [IOS 实现TabBar在Push后的隐藏 以及 两级Tabbar的切换]

    翻了好多网页都没找到资料,自己试了下终于成功了,遂分享一下. 1.实现TabBar在Push后的隐藏 假如结构是这样 NavController->A->B,我们想要实现在A里有Tabba ...

  7. jquery 当前链接激活传递参数|div的切换显示

    一.链接激活时传递参数 $("a").click(function(){ var obj=$(this).attr("field"); //获取当前field ...

  8. css两个form不换行，两个div并排代码

    1.form不换行通过table布局实现 <table> <tr> <td> <form method="get" action=&quo ...

  9. html/css 两个div在同一行

    在界面设计的时候,经常需要将两个div在同一行显示. 但是每次都会忘记怎么做,特此随笔,备忘. 如以下要将“第一个div”和“第二个div”显示在同一行: <div id="id1&q ...

  10. 如何定义让两个div横向排列

    方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...

随机推荐

  1. C#导出Excel设置单元格样式

    C# 导出Excel 1 //导出Excel 2 private void ExportExcel(string fileName, System.Data.DataTable myDGV, stri ...

  2. 四大组件之服务Service

    参考:Android开发基础之服务Service 什么是服务呢? 用俗话话应该是长期于后台运行的程序,如果是官方一点,首先它是一个组件,用于执行长期运行的任务,并且与用户没有交互. 每一个服务都需要在 ...

  3. 深入理解JVM - 自动内存管理

    对于从事C.C++程序开发的开发人员来说,在内存管理领域,他们既是拥有最高权力的"皇帝",又是从事最基础工作的劳动人民--既拥有每一个对象的"所有权",又担负着 ...

  4. 使用open打开子页面时，父页面关闭子页面操作

    <button onclick="open1()">kaiqi</button> <button onclick="close1()&quo ...

  5. Linux基础环境的各项配置(三)

    接上篇,安装centos操作系统后,需对系统的基础环境做一些配置,如下: 1.设置静态IP(防止每次开机可能生成不一样的IP,导致与此虚拟机通信时出现错误):DNS解析,可以ping通外网: 1.1 ...

  6. 蓝牙mesh组网实战（智能家居应用）

    目录 蓝牙mesh组网目前存在有入门门槛高的问题,比如,嵌入式工程师需要考虑到标准mesh模型的兼容,app开发工程师需要了解mesh协议栈才能直接走mesh与芯片通信.而沁恒官方提供的透传模型简洁易 ...

  7. iOS开发之各机型屏幕大小与键盘高度整理

    机型 屏幕宽 屏幕高 键盘高 iPhone 8 375 667 260 iPhone 8 Plus 414 736 271 iPhone X 375 812 336 iPhone Xs 375 812 ...

  8. Win10系统桌面exe文件图标消失不见了的解决方法

    使用 Windows10正式版系统 过程中,发现桌面上的一些exe文件图标突然消失不见了.虽然这些exe程序还能够正常运行,可是感觉还是非常不舒服.这该怎么办呢?接下来,就随小编看看Windows10 ...

  9. 【GENERAL FRAMEWORK】总框架——持续更新

    引: 鉴于目前挖的坑较多,未防止某些即将长期更新的博文出现烂尾,特设此框架 1.蓝桥杯(完结)         1.[蓝桥杯单片机组]LED.蜂鸣器与继电器--138-573的外设操作         ...

  10. nextLine和hasNextLine的区别

    == 重点:如果要判断一个文件这一行是否还有可读数据不能通过nextLine != null 来判断,要用hasNextLine是否为真来判断. == 1.nextLine: 公共字符串nextLin ...