css与jq中的显示与隐藏

最新推荐文章于 2025-06-24 10:55:52 发布

Mars-xq

最新推荐文章于 2025-06-24 10:55:52 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/sinat_31057219/article/details/69574816

css 专栏收录该内容

19 篇文章

订阅专栏

本文详细解释了CSS中display和visibility属性的区别与用法。display属性用于定义元素的显示方式，而visibility属性则用于控制元素的可见性。文章还介绍了jQuery中的hide(), show() 和 toggle() 方法，并给出了具体的示例。

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

CSS Display(显示) 与 Visibility（可见性）
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为”hidden”。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

hide() 方法隐藏被选元素。
提示：这与 CSS 属性 display:none 类似。
注释：隐藏的元素不会被完全显示（不再影响页面的布局）。

show() 方法显示隐藏的被选元素。
注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。

切换 hide() 和 show(),与使用toggle()

//方法一：两个按钮
$(document).ready(function(){
    $(".btn1").click(function(){
        $("p").hide();
    });
    $(".btn2").click(function(){
        $("p").show();
    });
});


//方法二：一个按钮
$(document).ready(function(){
    $("button").click(function(){
        $("p").toggle();
    });
});

toggleClass()

该方法对添加和移除被选元素的一个或多个类进行切换。

该方法检查每个元素中指定的类。
如果不存在则添加类，如果已设置则删除之。
这就是所谓的切换效果。

$(document).ready(function(){
    $("button").click(function(){
        $("p").toggleClass("main");
        //添加或移除样式main
    });
});