zoukankan      html  css  js  c++  java
  • 点击按钮显示隐藏层 和 切换按钮同时显示多个隐藏层

    按钮点击显示隐藏层(再次点击按钮则隐藏层关闭):

    HTML部分:

    <button type="button" id="show" onclick="showHidden()">点我显示隐藏层</button>

    <div id="hidden" style="display:none">我是隐藏层。</div>

    JS部分:

    <script type='text/javascript'>
    function showHidden() {
        var dis = document.getElementById('hidden');
        if (dis.style.display == 'none') {
        document.getElementById('show').innerHTML = "再点我关闭隐藏层一 ";
        dis.style.display = "";
    } else {
        document.getElementById('show').innerHTML = "点我显示隐藏层一 ";
        dis.style.display = "none";
        }
    }
    </script>

    按钮切换同时显示多个隐藏层(需要用到jQuery):

    HTML部分:

    <button type="button" onclick="showHidden('hidden')" checked>点我关闭隐藏层二和三</button>
    <button type="button" onclick="showHidden('show')">点我打开隐藏层二和三</button>

    <div class="row hiddenAndShow" style="display:none">我是隐藏层二</div>

    <div class="row hiddenAndShow" style="display:none">我是隐藏层三</div>

    JS部分:

    <script>
    function showHidden(hiddenAndShow) {
        if (hiddenAndShow == "hidden") {
                $('.hiddenAndShow').each(function () {

                $(this).css('display', 'none');

            });
        } else {

                $('.hiddenAndShow').each(function () {

                $(this).css('display', 'block');

            });
        }
    }
    </script>

  • 相关阅读:
    决策树详解
    快速排序python实现总结
    机器学习-主干学习路线梳理
    动态规划通用解法总结
    Ubuntu系统下环境安装遇到依赖冲突问题
    学习笔记----C语言的面向对象
    Linux下开发stm32--IDE篇
    Deepin中安装使用好用的字典GoldenDict
    python-参考书
    C语言-转义字符
  • 原文地址:https://www.cnblogs.com/Man-Dream-Necessary/p/5388499.html
Copyright © 2011-2022 走看看