这个栗子……

可以不吃，先预设一个变量表示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. 使用Java函数接口及lambda表达式隔离和模拟外部依赖更容易滴单测

    概述 单测是提升软件质量的有力手段.然而,由于编程语言上的支持不力,以及一些不好的编程习惯,导致编写单测很困难. 最容易理解最容易编写的单测,莫过于独立函数的单测.所谓独立函数,就是只依赖于传入的参数 ...

  2. 20165305 苏振龙《Java程序设计》第九周学习总结

    第十三章 Java网络编程 学习了解用于网络编程的类,了解URL.Socket.InetAddress和DatagramSocket类在网络编程中的重要作用 使用URL创建对象的应用程序称作客户端程序 ...

  3. Git简明使用教程

    猴子都能懂的GIT入门 https://backlog.com/git-tutorial/cn/git - 简易指南(这份教程挺好的) http://www.bootcss.com/p/git-gui ...

  4. 1、第一个android APP

    https://blog.csdn.net/tongyong128/article/details/68484726

  5. Git HEAD detached from XXX (git HEAD 游离) 解决办法

    本文 Git 图片主要来自:图解 Git,非常感谢! 读完本文你将了解: 什么是 HEAD HEAD 游离状态的利与弊 具体解决操作 Thanks 什么是 HEAD Git 中的 HEAD 可以理解为 ...

  6. .net core创建项目（指令方式）

    所谓的指令创建项目,就是不用再已安装的VS2015的环境下或者VS Core下创建,直接通过DOS指令创建也是OK的. 1.找到你所准备保存项目的项目文件夹(你也可以到某个目录用指令创建项目文件夹[  ...

  7. 使用GoldenGate初始化的两种方式

    在使用OGG开始增量数据的实时复制之前,一般需要对当前的存量数据进行初始化,如果是同构数据库,则可以使用数据库自带的工具完成,比如Oracle DB中的rman, expdp/impdp等. 其实og ...

  8. 计算概论（A）/基础编程练习2(8题)/6:数组逆序重放

    #include<stdio.h> int main() { // 输入n个整数 ; scanf("%d", &n); // 循环读入元素 while(scan ...

  9. 4~20mA

    4~20mA电流输出芯片XTR111完整电路 0-5v转0-20ma和0-5v转4-20ma 压控恒流源电路 4-20mA电流环路发送器入门

  10. 解决webgl使用canvas.toDataURL()没有内容的问题

    转的,记录一下,我还没有验证. 这个问题很好解决,就是在获取webgl对象的时候,多传入一个{preserveDrawingBuffer: true},然后在使用canvas.toDataURL()获 ...