点击按钮显示或隐藏Div块

最新推荐文章于 2024-04-09 14:32:59 发布

原创最新推荐文章于 2024-04-09 14:32:59 发布 · 1.3w 阅读

38 ·

CC 4.0 BY-SA版权

文章标签：

#动态显示和隐藏div #点击按钮显示和隐藏div #toggle()

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍两种使用JavaScript实现点击按钮来切换Div元素可见性的方法。一种是利用jQuery的toggle方法，另一种是直接操作DOM元素的display属性。这两种方法均可实现在网页中根据按钮点击事件显示或隐藏指定的Div块。

部署运行你感兴趣的模型镜像

通过点击按钮实现Div块在显示状态与隐藏状态之间来回切换。

代码如下：

方法一：

<!DOCTYPE html>
<html>
<head>
        <script src="/jquery/jquery-1.11.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("button").click(function() {
                    $("#div1").toggle();
                });
            });
        </script>
</head>
<body>
        <h3>点击按钮显示或隐藏Div块</h3>
        <button type="button">按钮</button>
        <div id="div1" style="border:2px solid #ff0000">
            再点击一下按钮我就会隐藏起来.
        </div>
</body>
</html>

方法二：

<!DOCTYPE html>
<html>
<head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
  	function showOrHide(){
  		var div = $("#div1").get(0);
  		if(div.style.display == ""){
  			div.style.display = "none";
  		}else{
  			div.style.display = "";
  		}
  	}
    </script>
</head>
<body>
    <h3>点击按钮显示或隐藏Div块</h3>
    <button onclick="showOrHide()" type="button">按钮</button>
    <div id="div1" style="display: none;border:2px solid #ff0000;">
        再点击一下按钮我就会隐藏起来.
    </div>
</body>
</html>

效果如下：