zoukankan      html  css  js  c++  java
  • 点击按钮对两个div的隐藏与显示进行切换

    HTML:

    <button type="button"  id="showHidden">点击切换div的隐藏与显示</button>

    <div id="div1">请叫我第一层</div>

    <div id="div2">请叫我第二层</div>

    JS:

    <script type='text/javascript'>

    function show_hidden(obj) {

      if(obj.style.diaplay == 'block') {

         obj.style.display = 'none';

      } else {

         obj.style.display = 'block';

      }

    }

    var sh = document.getElementById("showHidden");

    sh.click = function() {

    var div1 =  document.getElementById("div1");

    var div2 =  document.getElementById("div2");

    show_hidden(div1);

    show_hidden(div2);

    return false;

    }

    </script>

    示例:

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="utf-8">

    </head>
    <body>

    <button type="button" id="showHidden">点击切换div的隐藏与显示</button>

    <div id="div1" style="display:block">请叫我第一层</div>

    <div id="div2" style="display:none">请叫我第二层</div>

    <script type='text/javascript'>

    function show_hidden(obj) {

      if(obj.style.display == 'block') {

       obj.style.display = 'none';

      } else {

         obj.style.display = 'block';

      }

    }

    var sh = document.getElementById("showHidden");

    sh.onclick = function() {

    var div1 = document.getElementById("div1");

    var div2 = document.getElementById("div2");

    show_hidden(div1);

    show_hidden(div2);

    return false;

    }

    </script>

    </body>

    </html>

  • 相关阅读:
    ThinkPHP3.2.3使用分页
    使用phpmailer发送邮件
    字体笔记
    jquery实现上传文件大小类型的验证
    两个矩阵中的dp题的差异
    Linux进程间通信——使用共享内存
    使用管道完成进程间通信(匿名管道pipe、命名管道fifo)
    为什么 C++ 有指针了还要引用?
    实现一个Memcpy函数
    猜帽子颜色问题
  • 原文地址:https://www.cnblogs.com/Man-Dream-Necessary/p/5416164.html
Copyright © 2011-2022 走看看