Tab在当前的Web应用中是非常常见的,最大的好处在于可以充分的利用有限的空间来展示更多的内容。常见的的Tab一般都是通过Javascript来实现,它的好处是灵活和功能强大。但是在某些情况下,如果仅仅需要一个简单的内容切换时是可以考虑使用纯CSS来实现的。本文主要介绍两种纯CSS的实现方案:
Link to Dest
This is a new paragraph.
方案一便是利用:target伪类来实现Tab切换。实现原理为:在页面加载的时候通过CSS隐藏Tab相对应的内容,同时在:target伪类中将Tab内容设置为可见。
HTML结构如下:
- Tab A
-
Content A
- Tab B
-
Content B
- Tab C
-
Content C
- Tab D
-
Content D
使用该结构的一个好处在于缺少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;
}
使用CSS方案的一个弊端在于不易区分哪个Tab是当前选中的,一个简单的方式是给相应的Tab以及Tab内容设置相同的背景色,这样当Tab内容显示时,能够更清晰的辨别当前Tab。此外,由于是使用了CSS3中的选择符,因此目前只能在Firefox、Safari、IE8等现代浏览器下使用。
方案二的原理很简单,在大多数浏览器下,当点击锚点链接时,锚点对应的内容会自动跳到可视范围以内。根据该原理,将Tab的所有内容放到一个固定高度的容器中,并且设置容器的overflow为hidden,此外每个Tab内容的高度需要与容器保持一致。在该结构下,当点击锚点链接时对应的内容会自动跳转到可视范围以内容,即容器内。
具体的HTML结构如下:
Content A
Content B
Content C
Content D
由于和方案一的原理不一样,此处的HTML结构也只能使用Tab和内容分离的结构,使用该结构的一个问题在于当CSS缺失的情况下无法清晰的阅读内容。
关键的CSS代码如下:
/*给Tab Content容器设置高度*/
#tab_content{
height: 190px;
overflow: hidden;
}
/*给每个Tab Content定高度,需要与容器保持一致*/
#tab_content .content{
padding: 5px;
-moz-border-radius: 5px;
height: 190px;
overflow: hidden;
}
与方案一一样,这里也通过给Tab以及对应内容设置相同背景色来解决选中识别问题。