<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. LinuxGPU服务器搭建

    (1)驱动与cuda下载: https://www.nvidia.cn/Download/Find.aspx?lang=cn (2)执行以下命令进行安装,文件名替换为自己的. sudo sh NVID ...

  2. 肖sir ___性能测试____多线程

    一.理论 (一) (1)多线程是Python程序中实现多任务的一种方式(2)线程是程序执行的最小单位． (3)同属一个进程的多个线程共享进程所拥有的全部资源. (二)进程和线程对比 (1)关系对比: ...

  3. RabbitMQ Linux安装与启动服务

    本文转载自 https://blog.csdn.net/chengmin123456789/article/details/124710277 1.先下载 erlang-23.2.3-1.el7.x8 ...

  4. winform Message应用

    今天遇到了一个问题,winform 中使用自定义控件时,希望在点击自定义控件时设置控件为选中状态.而且这个自定义控件在一个窗体中被创建多个. 但在自定义控件中添加子控件后,导致鼠标点击事件只能响应在子 ...

  5. Django里ORM常用关键字

    一.ORM常用关键字 # 关键概览 1.create() 2.filter() 3.first() last() 4.update() 5.delete() 6.all() 7.values() 8. ...

  6. php 常用助手函数

    1 <?php 2 3 if (!function_exists('bcSum')) { 4 function bcSum($scale, ...$args): string 5 { 6 $re ...

  7. solve--ifconifg命令提示没有该命令解决方法

    一.如果你/bin目录下有ifconfig,则是命令路径没有在环境变量中添加,很多新装的linux系统都会存在这种问题   打开/etc/profile文件            命令: vi /et ...

  8. ubuntu拨号上网与以太网

    拨号上网使用的是ppp协议,主机和主机之间是点对点连接的,通常使用掩码255.255.255.255的方式来表示一个点对点连接. 以太网:使用的以太网协议. 拨号上网和以太网是两个完全不同的东西,如果 ...

  9. 前端之Vue day 05 父子通信、ref、动态组件、插槽、计算监听属性

    一.父传子 因为组件间数据不共享,所以我们要想办法打通父子之间的数据联系 自定义属性: 在父级中,给在使用的子组件标签加一个自定义的属性,因为要用到data,所以要写成 :自定义属性名='' #注意, ...

  10. 【ubuntu20 】主机，虚拟机ubuntu，开发板三者的ping通

    1.主机有线网卡设为静态ip,步骤如图 2.开发板运行的linux设为静态IP 修改文件 vi  /etc/network/interfaces # Configure Loopback auto l ...