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'){ ...
随机推荐
- Linux服务器安装部署redis
参考地址: redis教程:http://www.runoob.com/redis/redis-tutorial.html redis百度百科:https://baike.baidu.com/item ...
- Android开发常见错误汇总
[错误信息] [2011-01-19 16:39:10 - ApiDemos] WARNING: Application does not specify an API level requireme ...
- 2017_CET4_CET6_正规段子——正规！正规！解析！段子手勿入！
噫,2017年的四六级结束了,布吉岛宝宝们考得肿么样,反正本宝宝六级听力刚开始一阵挠头…… 天,神一般的FM信号,吃吃吃,擦擦擦,吃擦吃擦,吱吱吱…… 考完了就真完了,走出考场的那一刻,突然想起灰太狼 ...
- 怎样从外网访问内网Lighttpd？
本地安装了一个Lighttpd,只能在局域网内访问,怎样从外网也能访问到本地的Lighttpd呢?本文将介绍具体的实现步骤. 准备工作 安装并启动Lighttpd 默认安装的Lighttpd端口是80 ...
- MyEclipse项目的jquery.js发生[Multiple markers at this line - Missing semicolon]的解决方案
问题描述: 导入jquery库后,发现提示错误信息:Multiple markers at this line - Missing semicolon,如下截图所示: 解决方案: 选中该jquery. ...
- Kattis之旅——Divisible Subsequences
Given a sequence of positive integers, count all contiguous subsequences (sometimes called substring ...
- Python For Android (P4a):添加权限(Permissions)
from flutter study: <uses-permission android:name="android.permission.INTERNET"/>< ...
- Redis Desktop Manager 利用ssh连接 Redis
需开启6379端口,如果不设置密码,就忽略1,2步骤 第一步: 第二步: 第三步: 第四步: 第五步:
- Golang操作Redis
在系统环境下实现redis操作必须做好以下准备 一.当前系统必须下载安装redis 二.配置好GOPATH环境变量,并下载GO的redis驱动包 当做好以上准备工作时,紧接着如下 看以下要使用的驱动包 ...
- 用Java实现MVPtree——MVPtree点集内去重以及衍生出来的多维向量Hash问题
上次完成了MVPtree之后,客户又提出了MVPtree点集元素重复的问题,希望我将元素去重. 集合去重哪家强?java.util找HashSet!如果不计较元素顺序,放进去基本就没有重复元素了. 只 ...