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'){ ...
随机推荐
- python 读csv文件对列名进行合法性验证
如果正在读取CSV 数据并将它们转换为命名元组,需要注意对列名进行合法性认证.例如,一个CSV 格式文件有一个包含非法标识符的列头行,这样最终会导致在创建一个命名元组时产生一个ValueError 异 ...
- 2017-2018-2 java红茶第二周作业
详见团队博客:http://www.cnblogs.com/javahc/p/9033816.html
- 通用技术 mysql 亿级数据优化
通用技术 mysql 亿级数据优化 一定要正确设计索引 一定要避免SQL语句全表扫描,所以SQL一定要走索引(如:一切的 > < != 等等之类的写法都会导致全表扫描) 一定要避免 lim ...
- 关于Ajax无法下载文件到浏览器本地的问题
最近在做网站的时候遇到这样一个功能,在如图所示的页面中,需要用户点击链接的时候,能够以异步Ajax的方式判断服务器中是否存储有相应的Excel文件,如果没有的话就提示用户没有找到,如果有的话就下载到用 ...
- JustOj 1032: 习题6.7 完数
题目描述 一个数如果恰好等于它的因子之和,这个数就称为"完数". 例如,6的因子为1.2.3,而6=1+2+3,因此6是"完数". 编程序找出N之内的所有完数, ...
- 自学Java第二周的总结
在这一周里我在网上学习了java的对象和类,了解了对象与类以及简单的用法.对象是类的一个实例(对象不是找个女朋友),有状态和行为.例如,一条狗是一个对象,它的状态有:颜色.名字.品种:行为有:摇尾巴. ...
- 数据库 SQL 优化大总结之：百万级数据库优化方案
网上关于SQL优化的教程很多,但是比较杂乱.近日有空整理了一下,写出来跟大家分享一下,其中有错误和不足的地方,还请大家纠正补充. 这篇文章我花费了大量的时间查找资料.修改.排版,希望大家阅读之后,感觉 ...
- linux下VLAN设置
1. 安装vlan(vconfig)和加载8021q模块 [root@test0001~]#yum install vconfig [root@test0001~]#modprobe 8021q [r ...
- Linux学习笔记之yum安装和卸载软件
# yum -y install 包名(支持*) :自动选择y,全自动 # yum install 包名(支持*) :手动选择y or n # yum remove 包名(不支持*) # rpm -i ...
- ORA-00600: internal error code, arguments: [13030], [20]一例解决
两年没有接触oracle了,中午,一环境update from的时候出现ORA-00600: internal error code, arguments: [13030], [20]异常,经查,官网 ...