欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

点击按钮显示或隐藏Div块

程序员文章站 2022-05-05 19:10:07
...

通过点击按钮实现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>

效果如下:

点击按钮显示或隐藏Div块

点击按钮显示或隐藏Div块