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'){ ...
随机推荐
- freedom is a kind of responsibility
张维迎教授在2017年7月1日北大国发院2017届毕业典礼上的发言<自由是一种责任> 张维迎:自由是一种责任 本文为张维迎教授在2017年7月1日北大国发院2017届毕业典礼上的发言 ...
- maven项目没有src/test/java和src/test/resources目录问题解决
新建maven项目,如下图示: 只有src/main/java和src/main/resources两个目录,而没有src/test/java和src/test/resources,于是第一反应是没有 ...
- Web 应用架构基础课(转载)
Web 应用架构基础课 初级 web 应用开发者必学的基础网络架构概念 web 应用主流架构概览 上图便是我司(Storyblocks)网络架构的很好展现.如果你还没成为经验老道的 web 工程师,可 ...
- golang学习笔记8 beego参数配置 打包linux命令
golang学习笔记8 beego参数配置 打包linux命令 参数配置 - beego: 简约 & 强大并存的 Go 应用框架https://beego.me/docs/mvc/contro ...
- 读QT5.7源码（三）Q_OBJECT 和QMetaObject
Qt meta-object系统基于三个方面: 1.QObject提供一个基类,方便派生类使用meta-object系统的功能: 2.Q_OBJECT宏,在类的声明体内激活meta-object功 ...
- Robot Framework 自动化测试--部署篇
一.产品介绍 Robot Framework是一个基于Python的,可扩展的关键字驱动的测试自动化框架.它是为了端 到端的验收测试(End-To-End Acceptance Test)以及验收测试 ...
- [转载]FlipClock.js时钟,计数,3D翻转插件
1.FlipClock.js能够自动定义计数,时钟的翻牌效果,调用简单,下面简单记录下用法 2.官网地址:http://www.flipclockjs.com/ 3.调用2个文件 <link h ...
- CAT Caterpillar ET is really a exceptional obd2 solution
As a excellent obd2 solutions,Heavy Duty Diagnostic CAT Caterpillar ET Diagnostic Adapter features a ...
- 案例：配置apache和nginx的SSL加密传输协议
一.SSI解释 SSI是一种类似于ASP的基于服务器的网页制作技术.将内容发送到浏览器之前,可以使用“服务器端包含 (SSI)”指令将文本.图形或应用程序信息包含到网页中.例如,可以使用 SSI 包含 ...
- echarts遇到的问题
X轴无偏移: axisTick: { alignWithLabel: true }, x轴显示所有数据项且避免拥挤在xAxis设置: axisLabel: { interval: 0, rotate: ...