这个栗子……

可以不吃，先预设一个变量表示div的状态，例子中0是显示的，一开始是隐藏的。当点击时判断状态是显示0的还是隐藏1的；如果是显示的就把div隐藏，再把变量改变为1。再次点击时把会判断到变量是隐藏的，就会走显示那条路。

<!--

Author: XiaoWen

Create a file: 2016-12-07 10:09:27

Last modified: 2016-12-07 10:21:28

Start to work:

Finish the work:

Other information:

-->

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>点击显示和隐藏</title>

  <style>

    div{

      width: 100px;

      height: 100px;

      background: #eee;

    }

  </style>

</head>

<body>

  <button>

    显示/隐藏

  </button>

  <div>受罪的div，想隐藏就隐藏</div>

  <script>

    var but=document.getElementsByTagName("button");

    var div=document.getElementsByTagName("div");

    var temp=0; //0为显示

    but[0].onclick=function(){

      if(temp==0){ //本来是显示的，所以就隐藏咯

        div[0].style="display:none";

        temp=1; //隐藏了就把状态改变了

      }else{

        div[0].style="display:block";

        temp=0;

      }

    }

  </script>

</body>

</html>

w3c上有个开关灯的例子，是直接判断src路径中的字符来显示不同的图片。

使用取余 %

    var but=document.getElementsByTagName("button");

    var div=document.getElementsByTagName("div");

    var temp=0; //0为显示

    but[0].onclick=function(){

      if(temp%2==0){ //本来是显示的，所以就隐藏咯

        div[0].style="display:none";

      }else{

        div[0].style="display:block";

      }

      temp++

    }

使用布尔和非

    var but=document.getElementsByTagName("button");

    var div=document.getElementsByTagName("div");

    var b=true;

    but[0].onclick=function(){

      if(b){

        div[0].style="display:none";

      }else{

        div[0].style="display:block";

      }

      b=!b //把 true 变为 false 并赋给原来的变量

    }

期待此栗子的更有味的做法。

相似例子：

勾选时显示相应内容：http://www.cnblogs.com/daysme/articles/6140303.html

js点击显示隐藏的更多相关文章

  1. JS点击显示隐藏内容

    JS点击显示隐藏密码 思路:获取元素,判断点击,如果DIV显示就隐藏,如果DIV隐藏就显示出来. 1 if(DIV是显示的){ 2 div.style.display='none'; 3 } 4 el ...

  2. HTML5--》点击显示隐藏内容

    <details>浏览器支持比较差,可以用JavaScript实现这种功能. <!doctype html> <html> <head> <met ...

  3. 锋利的Jquery(点击显示隐藏div)

    点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  4. js获取元素显示隐藏的当前状态

    js获取元素显示隐藏的当前状态 // CSS var display = $("."+cls).css("display"); if(display == &q ...

  5. js 控制div 显示隐藏的问题

    var divs = document.getElementsByTagName("div");得到所有的divfor(var i=0;i<divs.length;i++){ ...

  6. JS组件系列——显示隐藏密码切换的jQuery插件

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  7. js 事件点击 显示 隐藏

    <div style="position:absolute;left:40%;top:10%;border-style:dotted"> <img src=&qu ...

  8. 一款js点击显示和隐藏的例子（pc，移动端通用）

    html部分: <div id="box"> <div id="box_title">标题</div> <div id ...

  9. input 显示/隐藏密码

    js代码: // 显示/隐藏密码 $('.open').on('click',function(){ if($("#psw").prop('type')=='password'){ ...

随机推荐

  1. ResourceBundle与Properties读取配置文件

    ResourceBundle与Properties的区别在于ResourceBundle通常是用于国际化的属性配置文件读取,Properties则是一般的属性配置文件读取. ResourceBundl ...

  2. 微信小程序制作家庭记账本之七

    最后一天,程序完成的仍然不是很好,作品很简陋,不过还是可以记账的,没有购买域名,别人无法使用,下次我会完成的更好.

  3. LoggerFactory.getLogger用法

    使用指定类初始化日志对象,在日志输出的时候,可以打印出日志信息所在类 如:Logger logger = LoggerFactory.getLogger(com.lz.Test.class);     ...

  4. Linux 安装 mysql 数据库

    1. 克隆虚拟机 2. 上传安装文件 1.上传文件 2.解压文件 tar -xvf 文件 3. 安装数据库 安装顺序: .debuginfo .shared .client .server 1. rp ...

  5. POJ 1308 Is It A Tree?和HDU 1272 小希的迷宫

    POJ题目网址:http://poj.org/problem?id=1308 HDU题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=1272 并查集的运用 ...

  6. python 3.7 方向键乱码

    原因是缺少安装包libreadline-dev 第一步安装libreadline-dev包:sudo apt-get install libreadline-dev(centos安装:yum -y i ...

  7. Oracle与MySQL区别

    MyBatis中模糊查询,mysql可以用concat,而oracle用"||"; 另外,mysql支持主键自增,而oracle不支持主键自增.

  8. Iris Classification on Tensorflow

    Iris Classification on Tensorflow Neural Network formula derivation \[ \begin{align} a & = x \cd ...

  9. SQL 基础语法笔记教程整理

    最近从图书馆借了本介绍 SQL 的书,打算复习一下基本语法,记录一下笔记,整理一下思路,以备日后复习之用. PS:本文适用 SQL Server2008 语法. 首先,附一个发现的 MySQL 读书笔 ...

  10. 什么是TF-A?

    1. TF-A的全称是什么? Arm Trusted Firmware 2. TF-A的作用是什么? 在secure world和non-secure world之间切换 3. TF-A涉及到哪几个部 ...