js点击显示隐藏
这个栗子……
可以不吃，先预设一个变量表示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点击显示隐藏的更多相关文章
- JS点击显示隐藏内容
JS点击显示隐藏密码 思路:获取元素,判断点击,如果DIV显示就隐藏,如果DIV隐藏就显示出来. 1 if(DIV是显示的){ 2 div.style.display='none'; 3 } 4 el ...
- HTML5--》点击显示隐藏内容
<details>浏览器支持比较差,可以用JavaScript实现这种功能. <!doctype html> <html> <head> <met ...
- 锋利的Jquery(点击显示隐藏div)
点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- js获取元素显示隐藏的当前状态
js获取元素显示隐藏的当前状态 // CSS var display = $("."+cls).css("display"); if(display == &q ...
- js 控制div 显示隐藏的问题
var divs = document.getElementsByTagName("div");得到所有的divfor(var i=0;i<divs.length;i++){ ...
- JS组件系列——显示隐藏密码切换的jQuery插件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- js 事件点击 显示 隐藏
<div style="position:absolute;left:40%;top:10%;border-style:dotted"> <img src=&qu ...
- 一款js点击显示和隐藏的例子（pc，移动端通用）
html部分: <div id="box"> <div id="box_title">标题</div> <div id ...
- input 显示/隐藏密码
js代码: // 显示/隐藏密码 $('.open').on('click',function(){ if($("#psw").prop('type')=='password'){ ...
随机推荐
- Eclipse创建maven工程后没有build path解决方案
1.修改maven工程下的.project文件为如下内容 <?xml version="1.0" encoding="UTF-8"?> <pr ...
- Java8 异步编排类CompletableFuture
为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. https://www.cnblogs.com/shijiaqi1066/p/8758206 ...
- Java多线程循环打印ABC的5种实现方法
https://blog.csdn.net/weixin_39723337/article/details/80352783 题目:3个线程循环打印ABC,其中A打印3次,B打印2次,C打印1次,循环 ...
- How to solve the problem that BMW Icom A2 A3 host can’t be connected?
Aftre the BMW ICOM host is connected to the car via a 16PIN connector, and the other side is connect ...
- webpack 创建vue项目过程中遇到的问题和解决方法
目录 1 webpack简介 2 webpack实现多个输入输出多个html 3 webpack 中的module下rules 下的use和loader选项 4 webpack 文件更新,如何使页面 ...
- The Little Prince-12/06
The Little Prince-12/06 “That doesn't matter. Draw me a sheep.” When the prince ask the planet to dr ...
- 怎样从外网访问内网WebLogic？
本地安装了一个WebLogic,只能在局域网内访问,怎样从外网也能访问到本地的WebLogic呢?本文将介绍具体的实现步骤. 准备工作 安装并启动WebLogic 默认安装的WebLogic端口是70 ...
- ltp makefile 解析
困惑于 /include/mk/automake.mk中出现了第一个目标 而makefile却任然将all当做最终目标 测试了一番后发觉: ifeq ($(MAKE_3_80_COMPAT),1)# ...
- centos/rhel 7 几个最重要变化（systemd,firewalld,networkmanager,文件系统）
详细参考:https://access.redhat.com/documentation/en-US/Red_Hat_Enterprise_Linux/7/html/System_Administra ...
- .net下安装 ZooKeeper.Net
PM> Install-Package ZooKeeper.Net正在尝试解析依赖项“log4net (≥ 1.2.10)”.正在安装“log4net 1.2.10”.已成功安装“log4net ...