张经纬的博客 -

CSS3 的显示与隐藏

Posted 六月 15th, 2010 归属于 CSS

演示地址：http://www.zhangjingwei.com/demo/css-menu.html

< !DOCTYPE html>
<head>
   <title>menu mockup</title>
   <style type="text/css">
      .show {display: none; }
      .hide:focus + .show {display: inline; }
      .hide:focus { display: none; }
      .hide:focus ~ #list { display:none; }
      @media print { .hide, .show { display: none; } }
   </style>
</head>
<body>
   <p>Here's a list</p>
      <div>
         <a href="#" class="hide">[hide]</a>
         <a href="#" class="show">[show]</a>
         <ol id="list">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
         </ol>
      </div>
   <p>How about that?</p>
</body>

目前共有 2 条评论，点此发表评论

小Q

六月 15th, 2010 @ 15:08

点了hide之后，再点show无法再次显示

回复
张经纬 reply on 六月 15th, 2010 23:29:
@小Q, 对CSS3支持不完善的缘故，用其他浏览器试试。

回复