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>

  • 相关阅读:
    连接数据库及出现System.AccessViolationException错误的解决方法
    WCF REST 工作总结
    jquery easyui 扩展验证
    正则表达式语法
    SQL select语句执行顺序
    添加头文件afxwin.h后引起异常的解决办法
    imagej基本操作
    医学图像处理(一)
    灰度图像的自动阈值分割(Otsu 法)
    关于glog使用中遇到的问题
  • 原文地址:https://www.cnblogs.com/Man-Dream-Necessary/p/5416164.html
Copyright © 2011-2022 走看看