61,112
社区成员
发帖
与我相关
我的任务
分享[散分]CSS3实现隐藏与显示切换效果原型
转载请注明出处：css探索之旅；本文地址：CSS3实现隐藏与显示切换效果原型
这段时间html5,css3可谓大大的火了，什么apple与adobe的冲突，IE9 beta preview开放下载，并高调宣布支持html5与css3。这些消息都无疑将html5与css3推到了峰尖浪头。然而，当html5与css3正式被推出时，它们能为整个互联网带来什么呢，又能给web开发者，尤其是web前端开发者带来什么不同呢？
我想，当html5与css3正式发布时，将给整个业界带来的好处是显著的，至于那个度是多少，我也不能断下结论。
所以，我们都可以趁着现在去尝尝鲜，小小的把玩一下。
今天，分享一个用CSS3实现简单的显示与隐藏的切换效果。是的，这个效果是不需要通过JavaScript的。
你可以使用 Firefox3.6+ 及 Opera10.53+ 预览：DEMO：css实现显示与隐藏切换
以下是这个DEMO的基本HTML结构：
<div id="switch">
<a href="?" class="display">显示</a>
<a href="?" class="hide">隐藏</a>
<p class="cont">CSS3将带给互联网无限的精彩，很多遥不可及的事情将可信手拈来。</p>
</div>
CSS实现：
#switch .hide{display:none;}
#switch .cont{display:none;}
#switch .display:focus{display:none;}
#switch .display:focus + .hide{display:inline;}
#switch .display:focus ~ .cont{display:block;}
简单的数行代码就可以实现隐藏和显示，是不是给你带来些许激动了？虽说这个DEMO还不够让人满意，但广大人民的智慧是无限的，定能将之做得更加完美。
相信，更多新特性的展现会成为促使html5与css3的尽早推行的动力。因为，一切皆有可能。
这段时间html5,css3可谓大大的火了，什么apple与adobe的冲突，IE9 beta preview开放下载，并高调宣布支持html5与css3。这些消息都无疑将html5与css3推到了峰尖浪头。然而，当html5与css3正式被推出时，它们能为整个互联网带来什么呢，又能给web开发者，尤其是web前端开发者带来什么不同呢？
我想，当html5与css3正式发布时，将给整个业界带来的好处是显著的，至于那个度是多少，我也不能断下结论。
所以，我们都可以趁着现在去尝尝鲜，小小的把玩一下。
今天，分享一个用CSS3实现简单的显示与隐藏的切换效果。是的，这个效果是不需要通过JavaScript的。
你可以使用 Firefox3.6+ 及 Opera10.53+ 预览：DEMO：css实现显示与隐藏切换
以下是这个DEMO的基本HTML结构：
<div id="switch">
<a href="?" class="display">显示</a>
<a href="?" class="hide">隐藏</a>
<p class="cont">CSS3将带给互联网无限的精彩，很多遥不可及的事情将可信手拈来。</p>
</div>
CSS实现：
#switch .hide{display:none;}
#switch .cont{display:none;}
#switch .display:focus{display:none;}
#switch .display:focus + .hide{display:inline;}
#switch .display:focus ~ .cont{display:block;}
简单的数行代码就可以实现隐藏和显示，是不是给你带来些许激动了？虽说这个DEMO还不够让人满意，但广大人民的智慧是无限的，定能将之做得更加完美。
相信，更多新特性的展现会成为促使html5与css3的尽早推行的动力。因为，一切皆有可能。
...全文
请发表友善的回复…
发表回复
q470341376 2013-03-10
- 打赏
- 举报
我会了。。。。。
中国好猿 2013-01-20
- 打赏
- 举报
没试过啊 。。
贪睡de小鞋 2012-12-23
- 打赏
- 举报
接分的来了
1m80 2012-07-17
- 打赏
- 举报
不错不错。。。
QQ22456577 2012-02-18
- 打赏
- 举报
挺好的
优雅地盲目战斗 2011-05-22
- 打赏
- 举报
google 的chrome 显示不了效果。
xinx54 2011-04-11
- 打赏
- 举报
当网上大部分人骂还在用IE6的时候。我却经常见到WIN 2000 ie5..
liang0404020 2011-02-14
- 打赏
- 举报
想知道CSS有几个版本？
yihuxz 2011-01-13
- 打赏
- 举报
不错。谢谢分享~~~
zixin19870519 2010-10-21
- 打赏
- 举报
学习。。。。。。
bzt_feng 2010-07-27
- 打赏
- 举报
haha
sisone 2010-07-26
- 打赏
- 举报
接分的来了！
blueweiwei 2010-07-26
- 打赏
- 举报
html5还要很长的路要走
huangfei2zou 2010-07-26
- 打赏
- 举报
散分，我接分
qq410029478 2010-07-26
- 打赏
- 举报
每天回帖即可获得10分可用分！
helloquixote 2010-07-26
- 打赏
- 举报
看看效果怎么样再说
lxb_2561 2010-07-26
- 打赏
- 举报
jf~~~~~~~~~
havefu 2010-07-26
- 打赏
- 举报
接分的
零点不睡觉 2010-07-26
- 打赏
- 举报
为啥只用css
ilyjx 2010-07-26
- 打赏
- 举报
貌似来晚了
加载更多回复（209）
