事件：onclick

属性：display

利用if语句实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">

<link href="css1.css" rel="stylesheet" type="text/css"
charset="UTF-8">
</head>
<body>
<input id="btn1" type="button" value="显示隐藏"/>
<div id="div1"></div>
<script src="js1.js"> </script>
</body>
</html>

//////////////////css

#div1{
display:none;
width:100px;
height:300px;
background:green;
}

////////////////////js

var oBtn=document.getElementById("btn1");
oBtn.onclick=function(){
var oDiv=document.getElementById("div1");
if(oDiv.style.display=="none"){
oDiv.style.display="block";
}
else{
oDiv.style.display="none";
}
};

2.3点击菜单显示div再点击就隐藏的更多相关文章

  1. jquery点击添加样式，再点击取出样式

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. radio点击一下选中，再点击恢复未选状态

    radio点击一下选中,再点击恢复未选状态 实现方式1: <input   type="radio"   id="cat"   name="ca ...

  3. js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表

    js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...

  4. js构建函数，点击按钮显示div，再点击按钮或其他区域，隐藏div

    这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...

  5. React 点击按钮显示div与隐藏div，并给div传children

    最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...

  6. JQ 点击指定文本框显示div。点击其他区域隐藏DIV

    <input id="username" type="text" style="width:90%;margin-top: 40px;" ...

  7. jquery实现点击显示，再点击隐藏

    //点击a标签,轮流显示和隐藏<div id="timo" style="background-color:red;height:50px;width:50px;& ...

  8. js计时器，点击开始计时，再点击停止

    点击倒计时开始,点击停止,再次点击又开始,再点停止... <i id=</i>秒 <em onclick="timeOpen();">开始</e ...

  9. Jquery点击除了指定div元素其他地方，隐藏该div

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script ty ...

随机推荐

  1. 【iOS系列】-iOS开发常用库文件总结

    这里是列举出得一部分,更多内容可参考https://github.com/darren90/Gather_iOS 码农周刊的总结 - 覆盖很广 调调的 - 很多开发相关内容都有体现 右滑返回的解决 - ...

  2. 设置清除html5页面缓存

    设置清除html5页面缓存 html5端设置 meta 标签: <meta http-equiv="Pragma" content="no-cache" ...

  3. 【视频】零基础学Android开发：蓝牙聊天室APP（三）

    零基础学Android开发:蓝牙聊天室APP第三讲 3.1 ImageView.ImageButton控件具体解释 3.2 GridView控件具体解释 3.3 SimpleAdapter适配器具体解 ...

  4. 2016/04/26 流程 数据库lcdb 四个表 1，用户表users 2，流程表（设定有哪些流程）liucheng 3，流程发起者表（记录谁发起到哪里） 4，流程经过的人员表 flowpath （order排序）

    流程:      十一 个页面 1,denglu.php(登录) <!DOCTYPE html> <html lang="en"> <head> ...

  5. Deep Learning 30: 卷积理解

    一.深度卷积神经网络学习笔记(一): 1. 这篇文章以贾清扬的ppt说明了卷积的实质,更说明了卷积输出图像大小应该为: 假设输入图像尺寸为W,卷积核尺寸为F,步幅(stride)为S(卷积核移动的步幅 ...

  6. （15）ServletConfig对象详解

    1,作用 主要是用于加载servlet的初始化参数.在一个web应用可以存在多个ServletConfig对象(一个Servlet对应一个ServletConfig对象) 2,创建时机和对象的获取 创 ...

  7. js验证form表单示例

    js验证form表单示例 检测测试了js表单验证,无jQuery(简单的功能有时无需jQuery版本) js代码如下:   <script type="text/javascript& ...

  8. 避免表单重复提交（js实现） （转）

    <script language="javascript">       function submitForm(obj){            obj.disabl ...

  9. 【HDU 1520】 Anniversary Party

    [题目链接] 点击打开链接 [算法] 树形DP 令f[i][0]表示 : 以i为根的子树中,若i不参加宴会,所能获得的最大愉悦值 f[i][1]表示 : 以i为根的子树中,若i参加宴会,所能获得的最大 ...

  10. 洛谷P2943 清理——DP

    题目:https://www.luogu.org/problemnew/show/P2943 一眼看去就有个 n^2 的做法:f[i] = min{ f[j] + num( i - j ) * num ...