display:none、visibility:hidden、jquery效果

最新推荐文章于 2024-02-11 13:17:33 发布

原创最新推荐文章于 2024-02-11 13:17:33 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #jsp

jsp 专栏收录该内容

5 篇文章

订阅专栏

文章目录

1.display:none、visibility:hidden

1.display:none

功能：让页面元素不可见，无法点击，且占据的空间消失
使用：

<body>
    <div>
        <strong>给元素设置display:none样式</strong>
        <p>A元素</p>
        <p style='display:none;'>B元素</p>
        <p>C元素</p>
    </div>
</body>

效果：
在这里插入图片描述

2.visibility:hidden

功能：

1.隐藏元素，但是仍占用空间，影响页面布局
2.具有继承性，父元素设置visibility:hidden 子元素也会继承这个属性；但是给子元素设置visibility:visible，子元素会重新显示出来。
3.不会影响计数

使用：

<body>
    <div>
        <strong>给元素设置visibility:hidden样式</strong>
        <p>A元素</p>
        <p style='visibility:hidden;'>B元素</p>
        <p>C元素</p>
    </div>

效果：
在这里插入图片描述

使用：

    <body>
        <div>
            <strong>给元素设置visibility:hidden样式</strong>
            <ol>
                <li>元素1</li>
                <li style="visibility:hidden;">元素2</li>
                <li>元素3</li>
                <li>元素4</li>
            </ol>
        </div>
        <div>
            <strong>给元素设置display:none样式</strong>
            <ol>
                <li>元素1</li>
                <li style="display:none;">元素2</li>
                <li>元素3</li>
                <li>元素4</li>
            </ol>
        </div>
    </body>

效果：
在这里插入图片描述

2.jquery效果 hide()、show()、toggle()

语法：

$(selector).hide(speed,callback)
$(selector).show(speed,callback)
$(selector).toggle(speed,callback)

使用：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("#p1").hide();
  });
  $("#show").click(function(){
    $("#p1").show(1000);
  });
  $("#hidebtn").click(function(){
	$("div").hide(1000,"linear",function(){
		alert("Hide() 方法已完成!");
	});
   });
  $("#hideAndShow").click(function(){
    	$("#p2").toggle();
   });
});
</script>
</head>
<body>
<p id="p1">如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button><hr>
	
<div>隐藏及设置回调函数</div>
<button id="hidebtn">带方法的隐藏按钮</button><hr>
	
<p id="p2">这是一个用来显示/隐藏切换的文本</p>
<button id="hideAndShow">显示/隐藏</button><hr>
	

</body>
</html>

3.jquery引用语法

id ="p1"        $("#p1");
<button>        $("button")
class="btn"     $(".btn")