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>

  • 相关阅读:
    B
    C. Baby Ehab Partitions Again
    NLP中数据稀疏问题的解决——数据平滑
    CodeForces-EDU-105 Div2 部分题解报告
    C
    前端面试知识点汇总
    elementUI table 合计行 单元格合并
    微信小程序 tab切换组件封装
    微信小程序-wx.request的封装实现
    微信小程序-input密码可见与不可见
  • 原文地址:https://www.cnblogs.com/Man-Dream-Necessary/p/5388499.html
Copyright © 2011-2022 走看看