JS点击显示隐藏内容
JS点击显示隐藏密码
思路:获取元素,判断点击,如果DIV显示就隐藏,如果DIV隐藏就显示出来。

1 if(DIV是显示的){
2 div.style.display='none';
3 }
4 else{
5 div.style.display='block';
6 }

代码:
style:
1 <style>
2 #text{display:block;width:300px;cursor:pointer;height:20px;border:solid 1px #CCC;}
3 #menu{display:none;width:300px;height:100px;border:solid 1px #CCC;}
4 </style>
js:

<script type="text/javascript">
window.onload=function(){
var wenzi=document.getElementById('text');
var div=document.getElementById('menu');
wenzi.onfocus=function(){
if(div.style.display=='block'){ // == 判断div.display是否为显示
div.style.display='none'; //= 赋值也可了解成改变
}
else{
div.style.display='block';
}
}
};
</script>

html
<span id="text">点击显示菜单,再点击隐藏菜单</span>
<div id="menu">这是文字哦。</div>
JS点击显示隐藏内容的更多相关文章
- HTML5--》点击显示隐藏内容
<details>浏览器支持比较差,可以用JavaScript实现这种功能. <!doctype html> <html> <head> <met ...
- js点击显示隐藏
这个栗子…… 可以不吃,先预设一个变量表示div的状态,例子中0是显示的,一开始是隐藏的.当点击时判断状态是显示0的还是隐藏1的:如果是显示的就把div隐藏,再把变量改变为1.再次点击时把会判断到变量 ...
- EditTextPreference点击后输入框显示隐藏内容,类似密码输入(转)
http://bbs.anzhuo.cn/thread-928131-1-1.html EditTextPreference点击后输入框显示隐藏内容,类似密码输入... [复制链接] aski ...
- 锋利的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 ...
随机推荐
- 用idea打包maven项目
利用idea工具打包项目 1.点击图中标记①,idea会自动生成打包命令,这个打包命令会包含单元测试内容,如果单元测试的内容报错,是打包不成功的,这个时候我们需要在打包命令中用 -Dmaven.tes ...
- Centos7 Python2 升级到Python3
1. 从Python官网到获取Python3的包, 切换到目录/usr/local/src wget https://www.python.org/ftp/python/3.7.2/Python-3. ...
- jquery的封装与对象学习
1.封装学习 /// <reference path="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" /> ...
- 安装Logstash到linux(源码)
运行环境 系统版本:CentOS Linux release 7.3.1611 (Core) 软件版本:logstash-7.1.0 硬件要求:最低2核4GB 安装过程 1.源码安装JDK 1.1.从 ...
- 推荐15款Google Chrome 插件
Google Chrome是由Google开发的免费网页浏览器.Chrome是化学元素“铬”的英文名称,过去也用Chrome称呼浏览器的外框.Chrome相应的开放源代码计划名为Chromium,而G ...
- PP: Meta-learning framework with applications to zero-shot time-series forecasting
From: Yoshua Bengio Problem: time series forecasting. Supplementary knowledge: 1. what is meta-learn ...
- 03_TypeScript函数
1.函数的定义 es5定义函数的方法 //函数声明法 function run(){ return 'run'; } //函数表达式 var run = function(){ return 'run ...
- 关于JavaScript的原型继承与原型链
在讨论原型继承之前,先回顾一下关于创建自定义类型的方式,这里推荐将构造函数和原型模式组合使用,通过构造函数来定义实例自己的属性,再通过原型来定义公共的方法和属性. 这样一来,每个实例都有自己的实例属性 ...
- cenos7 安装samba
1)安装samba应用# yum install samba samba-client2)启动Samba应用 systemctl start smb nmb3)Samba配置文件 /etc/samba ...
- Alice and Hairdresser
Alice's hair is growing by leaps and bounds. Maybe the cause of it is the excess of vitamins, or may ...