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'){ ...
随机推荐
- Presto 学习和使用笔记
1.presto 表连接查询的连接条件中不支持使用函数 比如下面的脚本在presto中运行会报错 select t1.period_start_date, t2.statistic_date from ...
- 【转】ETL介绍与ETL工具比较
本文转载自:http://blog.csdn.net/u013412535/article/details/43462537 ETL,是英文 Extract-Transform-Load 的缩写,用来 ...
- redux 数据规律
counter increase info todos 为 reducers 文件名 export default combineReducers({ todos, visibilityFilter ...
- 抓取https网页时，报错sun.security.validator.ValidatorException: PKIX path building failed 解决办法
抓取https网页时,报错sun.security.validator.ValidatorException: PKIX path building failed 解决办法 原因是https证书问题, ...
- jenkins2
创建工程 Eclipse创建工程:注意工程的路径,不是/home/svn,这个是svn的根目录. 是工程上传的路径,Apple直接下面有pom文件. 创建工程,创建一个任务就是创建一个工程. 需要注意 ...
- source from Other`s
以下链接转自其他努力的程序员们: 一一感谢! http完美讲解 -- https://www.cnblogs.com/ranyonsue/p/5984001.html http协议与soap协议之间的 ...
- ul点击li,增加样式
用户首次绑定后,需要选择一款头像 <!--imgList头像列表--><el-row class="regModel1"> <el-col :span ...
- linux OS与SQL修改时区，系统时间
linux修改系统时间和linux查看时区.修改时区的方法 一.查看和修改Linux的时区 1. 查看当前时区命令 : "date -R" 2. 修改设置Linux服务器时区方法 ...
- MFC超链接
最近写一个小的对话框程序时,想加一个文本超链接,研究了一下,发上自己的研究成果,供大家参考.下面说说完整的步骤. (假定静态文本ID为ID_STATIC) 首先,设置鼠标的形状及响应鼠标点击 第一步, ...
- 利用Python实现多线程聊天功能
#-*- coding:utf-8 -*- from threading import Thread from socket import * #1.实现接收消息 def recvDate(): wh ...