点击按钮显示或隐藏Div块

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

GRAY_KEY

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

阅读量1.2w

点赞数 10

分类专栏：前端文章标签：动态显示和隐藏div 点击按钮显示和隐藏div toggle()

本文链接：https://blog.csdn.net/gray_key/article/details/80073022

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

通过点击按钮实现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 οnclick="showOrHide()" type="button">按钮</button>
    <div id="div1" style="display: none;border:2px solid #ff0000;">
        再点击一下按钮我就会隐藏起来.
    </div>
</body>
</html>

效果如下：