Tab在当前的Web应用中是非常常见的，最大的好处在于可以充分的利用有限的空间来展示更多的内容。常见的的Tab一般都是通过Javascript来实现，它的好处是灵活和功能强大。但是在某些情况下，如果仅仅需要一个简单的内容切换时是可以考虑使用纯CSS来实现的。本文主要介绍两种纯CSS的实现方案：
1. 锚点 + :target;
2. 纯锚点;
这两种各有各优点，也有各自的局限性。
具体的Demo请查看这里
方案一: 锚点 + :target
CSS3中引入了一个新的伪类:target，当用户和页面进行某些交互时会触发，例如有以下的代码，当用户点击链接时，便会触发p元素的:target伪类。
<a href="#dest">Link to Dest</a>
<p id="dest">This is a new paragraph.</p> |
方案一便是利用:target伪类来实现Tab切换。实现原理为：在页面加载的时候通过CSS隐藏Tab相对应的内容，同时在:target伪类中将Tab内容设置为可见。
HTML结构如下：
|
<dl>
<dt class="tab-a first"><a href="#a">Tab A</a></dt>
<dd id="a" class="content-a">
Content A
</dd>
<dt class="tab-b"><a href="#b">Tab B</a></dt>
<dd id="b" class="content-b">
Content B
</dd>
<dt class="tab-c"><a href="#c">Tab C</a></dt>
<dd id="c" class="content-c">
Content C
</dd>
<dt class="tab-d"><a href="#d">Tab D</a></dt>
<dd id="d" class="content-d">
Content D
</dd>
</dl>
使用该结构的一个好处在于缺少CSS时依然可以清晰的阅读内容。
关键的CSS代码如下
dd{
padding: 5px;
/*隐藏Tab的内容*/
display:none;
-moz-border-radius: 5px;
margin-top:20px
}
dd:target{
position: absolute;
/*显示Tab的内容*/
display:block;
}
/*给Tab以及相应的内容设置相同的背景色*/
.tab-a,.content-a{
background: #CCFF00;
}
.tab-b,.content-b{
background: #CCFFFF;
}
.tab-c,.content-c{
background: #FFFF00;
}
.tab-d,.content-d{
background: #FFCCFF;
}
|
|
