关于CSS中display

最新推荐文章于 2025-03-25 00:15:00 发布

weixin_30867015

最新推荐文章于 2025-03-25 00:15:00 发布

阅读量46

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/smailpeanut/p/6114590.html

本文介绍如何使用CSS的display属性来控制元素的显示状态。通过示例代码展示了如何让一个div元素默认隐藏，并在特定条件下（如选择特定的下拉菜单选项）使其可见。这种方法常用于网页动态内容的展示与隐藏。

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

display是设置元素显示的方式:
block是一块状元素的方式显示，
inline是以内联元素的方式显示，
none是不不显示；
block:块状元素会单独占据一样，其他元素跟他在同一行的会被迫换行，挤到下一行那里去，inline则不会这样


当你在页面中要隐藏一个div的时候，但是在某个条件这下又要让他展示出来。这个时候你可以试一下这个属性

<div class="form-group">
<label for="inputname" class="col-sm-2 control-label">商品类型</label>
<div class="col-sm-10">
<select id="categoryId"  class="form-control">
<option class="selector" value="1">保健品</option>
<option class="selector" value="3">书籍</option>
<option class="selector" value="3">器械</option>
<option class="selector" value="4">膏药</option>
<option class="selector" value="100">会员卡</option>
<option class="selector" value="200">服务项目</option>
<option class="selector" value="300">套餐</option>
</select>
</div>
</div>

这是一个下拉选择





<div class="form-group   selecttor" style="display: none">
<label for="inputname" class="col-sm-2 control-label">储值</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="balance" name="balance">
</div>
</div>

这个时候这个div是展示不到页面上的

但是当一个条件满足时他才会展示
比如说我那个下拉框选择会员卡时，我添加一个下拉框选项的点击事件

/*添加会员卡储值是否展示*/
$(".selector").click(function () {
var categoryId=$("#categoryId").val();
if(categoryId==100){
$(".selecttor").css("display","block");
    }
else{
$(".selecttor").css("display","none");
    }
});

这是个人用的比较多的，希望对各位有所帮助；