纯CSS实现Tab的两种方案

Tab在当前的Web应用中是非常常见的,最大的好处在于可以充分的利用有限的空间来展示更多的内容。常见的的Tab一般都是通过Javascript来实现,它的好处是灵活和功能强大。但是在某些情况下,如果仅仅需要一个简单的内容切换时是可以考虑使用纯CSS来实现的。本文主要介绍两种纯CSS的实现方案:

  • 1. 锚点 + :target;
  • 2. 纯锚点;

这两种各有各优点,也有各自的局限性。 
具体的Demo请查看这里

方案一: 锚点 + :target

CSS3中引入了一个新的伪类:target,当用户和页面进行某些交互时会触发,例如有以下的代码,当用户点击链接时,便会触发p元素的:target伪类。

<a  href="https://varnow.org/p_318_cpage_1/">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="https://varnow.org/p_241/">Tab A</a></dt>
    
<dd  id="a"  class="content-a">
    Content A
    
</dd>
    
<dt  class="tab-b"><a  href="https://varnow.org/page_id_2/">Tab B</a></dt>
    
<dd  id="b"  class="content-b">
    Content B
    
</dd>
    
<dt  class="tab-c"><a  href="https://varnow.org/p_340/">Tab C</a></dt>
    
<dd  id="c"  class="content-c">
    Content C
    
</dd>
    
<dt  class="tab-d"><a  href="https://varnow.org/tag_%e9%a2%84%e8%a7%a3%e6%9e%90/">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 ;
}

使用CSS方案的一个弊端在于不易区分哪个Tab是当前选中的,一个简单的方式是给相应的Tab以及Tab内容设置相同的背景色,这样当Tab内容显示时,能够更清晰的辨别当前Tab。此外,由于是使用了CSS3中的选择符,因此目前只能在Firefox、Safari、IE8等现代浏览器下使用。

方案二: 纯锚点

方案二的原理很简单,在大多数浏览器下,当点击锚点链接时,锚点对应的内容会自动跳到可视范围以内。根据该原理,将Tab的所有内容放到一个固定高度的容器中,并且设置容器的overflow为hidden,此外每个Tab内容的高度需要与容器保持一致。在该结构下,当点击锚点链接时对应的内容会自动跳转到可视范围以内容,即容器内。

具体的HTML结构如下:

<ul  id="tab_nv">
    
<li  class="tab-a"><a  href="https://varnow.org/localstorage/">Tab A</a></li>
    
<li  class="tab-b"><a  href="https://varnow.org/load-scripts-without-blocking-defer/">Tab B</a></li>
    
<li  class="tab-c"><a  href="https://varnow.org/wp-trackback_p_331/">Tab C</a></li>
    
<li  class="tab-d"><a  href="https://varnow.org/p_241/">Tab D</a></li>
</ul>
<div  id="tab_content">
    
<div  id="a2"  class="content content-a">
    Content A
    
</div>
    
<div  id="b2"  class="content content-b">
    Content B
    
</div>
    
<div  id="c2"  class="content content-c">
    Content C
    
</div>
    
<div  id="d2"  class="content  content-d">
    Content D
    
</div>
</div>

由于和方案一的原理不一样,此处的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以及对应内容设置相同背景色来解决选中识别问题。

总结

  • 1. 纯CSS实现的Tab受限很多,比如方案二中需要给每个Tab Content设置相同的高度。
  • 2. 无法有效的标识当前选中的Tab,本文是通过设置相同背景色做区分,在很多情况下不一定适用。
  • 3. 两个方案都存在兼容性问题,方案一使用了CSS3的选择符,受限于CSS的实现;而方案二据说在Opera下不灵。
  • 4. 方案一中,当点击其他会触发:target的锚点(或发生类似交互)时,Tab Content会隐藏。

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Comments »

 
 

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">