CSS - 隐藏显示 ¶

• 作者：KK

• 发表日期：2016.1.26

为元素设置display:none;样式可以让它隐藏不显示,而改值改成block就可以让它显示(暂时这么说吧)

以下代码有三个div,但实际上只会显示2个,因为第2个被隐藏了,你可以删除第二个的隐藏样式试下

<div style="height:50px; background:red;">导航</div>
<div style="height:50px; background:blue; display:none;" id="xxx">联系人列表</div>
<div style="height:50px; background:green;">拨号,发送短信,通话记录</div>

<button type="button" onclick="document.getElementById('xxx').style.display='block'">点击查看联系人</button>
<button type="button" onclick="document.getElementById('xxx').style.display='none'">点击收起联系人</button>

其中我还加了2个button来辅助演示,它们的onclick属性中写了一些JavaScript代码来实现显示和隐藏操作,JavaScript以后再说,重点是你要知道display属性控制显示和隐藏

保留占位的隐藏 ¶

属性和值:visibility:none;

以面的隐藏方式在元素消失后,它原本占有的高度还在,把下面的东西顶下去了

<div style="height:50px; background:red;">导航</div>
<div style="height:50px; background:blue; visibility:hidden;" id="xxx">联系人列表</div>
<div style="height:50px; background:green;">拨号,发送短信,通话记录</div>

<button type="button" onclick="document.getElementById('xxx').style.visibility='visible'">点击查看联系人</button>
<button type="button" onclick="document.getElementById('xxx').style.visibility='hidden'">点击收起联系人</button>

其中恢复让它显示的话就设置为visibility:visible;