事件：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. C语言的结构体和 C++结构体的区别

     C语言的结构体和 C++结构体的区别 关于C++中声明结构体中需要使用构造器创建实例对象的语法: <C++的结构体构造方法的基本概念:结构体的构造方法需要和结构体的名字相同,并且无返回值,也不 ...

  2. How to get service execuable path

    Some time we need to get specific service path and then do something you want. there are 2 way to ge ...

  3. 关于OutOfMemoryError的处理

    转自:http://www.blogjava.net/rosen/archive/2010/05/21/321575.html http://www.blogjava.net/rosen/archiv ...

  4. Timus 1545. Hieroglyphs Trie的即学即用 实现字典提示功能

    前面学了Trie,那么就即学即用.运用Trie数据结构来解决这道题目. 本题目比較简单,当然能够不使用Trie.只是多用高级数据结构还是非常有优点的. 题目: Vova is fond of anim ...

  5. mysql13---索引使用注意

    .4唯一索引 ①当表的某列被指定为unique约束时,这列就是一个唯一索引 ) unique); 这时, name 列就是一个唯一索引. unique字段可以为NULL,并可以有多NULL(,null ...

  6. C# 取html <data>内容

    private void button1_Click(object sender, EventArgs e) { string strSource = GetHttpWebRequest(" ...

  7. string operation in powershell

    https://blogs.technet.microsoft.com/heyscriptingguy/2014/07/15/keep-your-hands-clean-use-powershell- ...

  8. BZOJ_2286_[Sdoi2011]消耗战_虚树+树形DP+树剖lca

    BZOJ_2286_[Sdoi2011]消耗战_虚树+树形DP Description 在一场战争中,战场由n个岛屿和n-1个桥梁组成,保证每两个岛屿间有且仅有一条路径可达.现在,我军已经侦查到敌军的 ...

  9. bzoj 2962 序列操作 —— 线段树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2962 维护 sum[i] 表示选 i 个的乘积和,合并两个子树就枚举两边选多少,乘起来即可: ...

  10. 【转】浏览器中输入url后发生了什么

    原文地址:http://www.jianshu.com/p/c1dfc6caa520 在学习前端的过程中经常看到这样一个问题:当你在浏览器中输入url后发生了什么?下面是个人学习过程中的总结,供个人复 ...