点击切换div 的隐藏与显示

最新推荐文章于 2024-05-23 19:58:37 发布

H_c_l

最新推荐文章于 2024-05-23 19:58:37 发布

阅读量3.3k

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/H_c_l/article/details/90437272

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

点击切换div 的隐藏与显示

适合做切换按钮

<!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>

在这里插入图片描述

H_c_l

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
点击切换div 的隐藏与显示

点击切换div 的隐藏与显示适合做切换按钮<!DOCTYPE html><html><head> <meta charset="utf-8"></head><body> <button type="button" id="showHidden">点击切换div的隐藏与显示<...
复制链接

扫一扫

专栏目录