JS隐藏/显示div标签

最新推荐文章于 2022-12-24 09:38:46 发布

原创最新推荐文章于 2022-12-24 09:38:46 发布 · 970 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

这篇博客展示了如何通过JavaScript实现一个简单的交互功能，即点击按钮显示原本隐藏的div内容。HTML结构中包含了一个初始隐藏的div和一个触发显示事件的按钮。当用户点击按钮时，JavaScript函数`hideDiv()`被调用，将div的display属性设置为'block'，从而显示隐藏的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 默认为隐藏 -->
    <style>
    #hide{display: none;}
    </style>
     <!-- 为button按钮添加一个点击后显示事件 -->
    <script>
        function hideDiv(){
            var btn = document.getElementById('hide');
            btn.style.display = "block";

        }
    </script>
</head>
<body>
    <input id="show" type="button" value="显示隐藏div" onclick="hideDiv()">
    <!-- 创建一个div标签，并把要隐藏的内容写到div里 -->
    <div id="hide">我是隐藏的div</div>
    
</body>
</html>

效果图: