纯CSSTab面板/选项卡
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;
}
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>
<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里上下抽动。
当然这个方法也有不足的地方，比如只能是点击切换，而且要注意容器和子盒子的范围。
这方法来自蓝色理想，并不是我想出来的，很佩服作者能想出这种办法。
