您的位置：首页 > Web前端 > JavaScript

JS点击显示隐藏内容

2013-02-26 21:45 253 查看
JS点击显示隐藏密码

思路：获取元素，判断点击，如果DIV显示就隐藏，如果DIV隐藏就显示出来。

if(DIV是显示的){
div.style.display='none';
}
else{
div.style.display='block';
}


代码：

style:

<style>
#text{display:block;width:300px;cursor:pointer;height:20px;border:solid 1px #CCC;}
#menu{display:none;width:300px;height:100px;border:solid 1px #CCC;}
</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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航