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>

  • 相关阅读:
    jQuery选择器之层级选择器
    信息滚动制作
    scrollTop、offsetTop、clientTop
    模电GG
    matlab求解线性方程组
    NWERC2016I
    WEB开发资料集散
    NWERC2016H
    相量变换的性质
    GCJ2017R1C B. Parenting Partnering
  • 原文地址:https://www.cnblogs.com/Man-Dream-Necessary/p/5388499.html
Copyright © 2011-2022 走看看