zoukankan      html  css  js  c++  java
  • 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;300px;cursor:pointer;height:20px;border:solid 1px #CCC;}
    3 #menu{display:none;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>
  • 相关阅读:
    mysql日志
    验证栈序列
    限流方案分析
    集合
    数据结构-树
    链表的中间节点
    PHP实现链表
    php扩展安装方式
    2017 Multi-University Training Contest
    用LCT解一类动态图的问题
  • 原文地址:https://www.cnblogs.com/lsongyang/p/7977994.html
Copyright © 2011-2022 走看看