一起CSS

当前位置:一起CSS > CSS > 文章正文

纯CSSTab面板/选项卡

日期:2008-08-16 分类:CSS

Tab面板好象最早出现在网易吧。Tab面板由于能节省很多网页空间、给用户较好的体验,受到很大家的喜爱,所以很快流行起来了。

Tab面板一般都是利用javascript制作的,也应该由javascript制作。现在我们突破常规,用纯CSS来制作一个Tab面板,你可以先点击这里查看效果,怎么样?点击3个链接,有不同的内容切换吧。看看具体的代码:

CSS代码:

*{
 margin:0;
 padding:0;
 list-style:none;
 font-size:12px;
 }
#container{
 width:300px;
 margin:10px auto;
 position:relative;
 border:1px solid #666;
 }
ul{
 width:20px;
 height:100px;
 position:absolute;
 right:5px;
 top:100px;
 }
ul li{
 height:33px;
 }
ul li a{
 display:block;
 width:20px;
 height:20px;
 line-height:20px;
 text-align:center;
 color:#000;
 background:#ccc;
 text-decoration:none;
 }
ul li a:hover{
 color:#fff;
 background:#666;
 }
#wrapper{
 height:300px;
 overflow:hidden;
 }
#a1,#a2,#a3{
 width:300px;
 height:300px;
 }

XHTML代码:

<div id="container">
 <ul>
  <li><a href="#a1">1</a></li>
  <li><a href="#a2">2</a></li>
  <li><a href="#a3">3</a></li>
 </ul>
 <div id="wrapper">
  <div id="a1" style="background:#FF0000">
  </div>
  <div id="a2" style="background:#00FF00">
  </div>
  <div id="a3" style="background:#0000FF;">
  </div>
 </div>
</div>

看了代码之后你明白了其中的原理吗?明白了当然最好,没明白也没关系,继续看。

其实原理就是:固定外面容器#wrapper的大小。给里面的每个子盒子(div)设置一个瞄点(瞄点刚好又是id),最后让链接分别制向这些瞄点。当我们点击链接“2”的时候,这个链接指向瞄点#a2,那么瞄点#a2所在的盒子的顶部就到了容器#wrapper的顶部,它把#a1挤上去了,#a3也还在下面,又由于容器#wrapper有overflow:hidden属性,所以#a1和#a3都不显示。说白了就是3个div在容器#wrapper里上下抽动。

当然这个方法也有不足的地方,比如只能是点击切换,而且要注意容器和子盒子的范围。

这方法来自蓝色理想,并不是我想出来的,很佩服作者能想出这种办法。

查看:755 评论:4 标签:

随机日志

共有 4 条评论

发表留言

请言之有物,无意义留言或只为留链接留言一律不予通过!

提示: 您可以使用一些简单的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved