纯CSS选项卡的制作方法

发表于 2009年10月18日由 kily

其实这个效果的制作思路在以前的文章纯CSS图片切换效果中提到过，这次做了些拓展。让它成为流行的选项卡效果。当然这个效果也可以用JS实现，也是介绍过的，只用到了几句很简单的JavaScript就可以实现。

先看最终效果图：

css-tab

由于是纯CSS实现的在载入速度和效率方面应该是最快的，所以很广泛的应用于信息类网站。这次就不多解释了，直接上效果：

查看效果与源文件

《纯CSS选项卡的制作方法》上有 28 条评论

Sawyer 在 2009年11月7日16:34 说：

以后一定常来学习~~

回复 ↓
- kily 在 2009年11月7日16:39 说：
  
  @Sawyer 呵呵。相互学习吧^!^
  
  回复 ↓
视频监控在 2009年11月2日10:29 说：

不错，收藏！

回复 ↓
菲萨塔在 2009年10月22日13:23 说：

好东西永远值得收藏和使用呵呵！！！！

回复 ↓
随影在 2009年10月22日13:10 说：

太强了收藏了哈！

回复 ↓
青色在 2009年10月21日23:16 说：

有人写过了，另外，在 opera 里无效。

回复 ↓
- kily 在 2009年10月22日07:37 说：
  
  @青色嗯，的确。应该是opera以锚点的解释和其它浏览器不一样吧！
  
  回复 ↓
金城网络在 2009年10月21日17:22 说：

非常不错。金城网络 http://www.wfwowo.cn 望回访。

回复 ↓
365hope 在 2009年10月21日09:57 说：

选项卡，的确很好玩，而且也能够节省不少空间，在侧边栏。

以前偶都爱死它了啊！

回复 ↓
wuleilei 在 2009年10月20日13:07 说：

好简单的方法，效果也不错~

回复 ↓
- kily 在 2009年10月20日15:49 说：
  
  @wuleilei 感觉一般的应用也挺好的。
  
  回复 ↓
回憶在 2009年10月20日08:46 说：

學習一下，有時間自己搞下試試

回复 ↓
whisperer 在 2009年10月19日23:28 说：

IE下有点儿问题 chrome正常

回复 ↓
安在 2009年10月19日23:00 说：

CSS做出来就是觉得生硬…

回复 ↓
- kily 在 2009年10月20日12:56 说：
  
  @安有同感。
  
  回复 ↓
yedo 在 2009年10月19日22:57 说：

IE8下 1显示不出来~

回复 ↓
- kily 在 2009年10月20日08:15 说：
  
  @yedo 不会吧，我的怎么挺好的呀？
  
  回复 ↓
- kily 在 2009年10月20日08:32 说：
  
  @yedo 是IE7有些问题。重加了个兼容，现在好了，主要是现在我机子没法子本地运行IEtester所以做不了调试。
  
  回复 ↓
  - yedo 在 2009年10月20日09:39 说：
    
    已经没有问题了：）
    
    回复 ↓
吴熠在 2009年10月19日14:35 说：

收藏并应用。

回复 ↓
- kily 在 2009年10月19日14:40 说：
  
  @吴熠呵呵，应用更重要哈。
  
  回复 ↓
卢松松在 2009年10月19日13:00 说：

下次在做这种效果的时候直接到你整理来套了

回复 ↓
- kily 在 2009年10月19日14:56 说：
  
  @卢松松呵呵，多谢赏识。
  
  回复 ↓
sleepy 在 2009年10月19日11:27 说：

good，收藏了以后用

回复 ↓
先看看在 2009年10月19日11:26 说：

我也要学习下css了

回复 ↓
万戈在 2009年10月19日09:15 说：

恩，不错，如果能给当前选项卡上加个样式就更完美了

回复 ↓
- kily 在 2009年10月19日10:22 说：
  
  @万戈嗯。细节可以自己添加的。这只是个框架。
  
  回复 ↓
翔子在 2009年10月19日01:02 说：

看起来不错整洁

回复 ↓

Kily's Blog

calls me kily

纯CSS选项卡的制作方法

《纯CSS选项卡的制作方法》上有 28 条评论

发表评论取消回复

《纯CSS选项卡的制作方法》上有 28 条评论

发表评论 取消回复

发表评论取消回复