纯CSS实现Tab的两种方案

光明使者

1. Tab在当前的Web应用中是非常常见的，最大的好处在于可以充分的利用有限的空间来展示更多的内容。常见的的Tab一般都是通过Javascript来实现，它的好处是灵活和功能强大。但是在某些情况下，如果仅仅需要一个简单的内容切换时是可以考虑使用纯CSS来实现的。本文主要介绍两种纯CSS的实现方案：
   
2. 　　1. 锚点 + :target;
   
3. 　　2. 纯锚点;
   
4. 　　这两种各有各优点，也有各自的局限性。
   
5. 　　
   
6. 　　方案一: 锚点 + :target
   
7. 　　CSS3中引入了一个新的伪类:target，当用户和页面进行某些交互时会触发，例如有以下的代码，当用户点击链接时，便会触发p元素的:target伪类。
   
8. 
   
9. 
   
10. <a href='#dest'>Link to Dest</a>
    
11.              <p id='dest'>This is a new paragraph.</p>
    
12. 
    
13. 
    
14. 　　方案一便是利用:target伪类来实现Tab切换。实现原理为：在页面加载的时候通过CSS隐藏Tab相对应的内容，同时在:target伪类中将Tab内容设置为可见。
    
15. 　　HTML结构如下：
    
16. 
    
17. 
    
18.              <dl>
    
19.                  <dt class='tab-a first'><a href='#a'>Tab A</a></dt>
    
20.                  <dd id='a' class='content-a'>
    
21.                  Content A
    
22.                  </dd>
    
23.                  <dt class='tab-b'><a href='#b'>Tab B</a></dt>
    
24.                  <dd id='b' class='content-b'>
    
25.                  Content B
    
26.                  </dd>
    
27.                  <dt class='tab-c'><a href='#c'>Tab C</a></dt>
    
28.                  <dd id='c' class='content-c'>
    
29.                  Content C
    
30.                  </dd>
    
31.                  <dt class='tab-d'><a href='#d'>Tab D</a></dt>
    
32.                  <dd id='d' class='content-d'>
    
33.                  Content D
    
34.                  </dd>
    
35.              </dl>
    
36.              使用该结构的一个好处在于缺少CSS时依然可以清晰的阅读内容。
    
37.              关键的CSS代码如下
    
38.               dd{
    
39.                  padding: 5px;
    
40.                  /*隐藏Tab的内容*/
    
41.                  display:none;
    
42.                  -moz-border-radius: 5px;
    
43.                  margin-top:20px
    
44.              }
    
45.               
    
46.             dd:target{
    
47.                  position: absolute;
    
48.                  /*显示Tab的内容*/
    
49.                  display:block;
    
50.              }
    
51.              /*给Tab以及相应的内容设置相同的背景色*/
    
52.              .tab-a,.content-a{
    
53.                  background: #CCFF00;
    
54.              }
    
55.              .tab-b,.content-b{
    
56.                  background: #CCFFFF;
    
57.              }
    
58.              .tab-c,.content-c{
    
59.                  background: #FFFF00;
    
60.              }
    
61.              .tab-d,.content-d{
    
62.                  background: #FFCCFF;
    
63.              }
    
64.               
    
65. 
    
66. 
    
67. 　　使用CSS方案的一个弊端在于不易区分哪个Tab是当前选中的，一个简单的方式是给相应的Tab以及Tab内容设置相同的背景色，这样当Tab内容显示时，能够更清晰的辨别当前Tab。此外，由于是使用了CSS3中的选择符，因此目前只能在Firefox、Safari、IE8等现代浏览器下使用。
    
68. 　　方案二: 纯锚点
    
69. 　　方案二的原理很简单，在大多数浏览器下，当点击锚点链接时，锚点对应的内容会自动跳到可视范围以内。根据该原理，将Tab的所有内容放到一个固定高度的容器中，并且设置容器的overflow为hidden，此外每个Tab内容的高度需要与容器保持一致。在该结构下，当点击锚点链接时对应的内容会自动跳转到可视范围以内容，即容器内。
    
70. 　　具体的HTML结构如下：
    
71. 
    
72. 
    
73. <ul id='tab_nv'>
    
74.                  <li class='tab-a'><a href='#a2'>Tab A</a></li>
    
75.                  <li class='tab-b'><a href='#b2'>Tab B</a></li>
    
76.                  <li class='tab-c'><a href='#c2'>Tab C</a></li>
    
77.                  <li class='tab-d'><a href='#d2'>Tab D</a></li>
    
78.              </ul>
    
79.              <div id='tab_content'>
    
80.                  <div id='a2' class='content content-a'>
    
81.                  Content A
    
82.                  </div>
    
83.                  <div id='b2' class='content content-b'>
    
84.                  Content B
    
85.                  </div>
    
86.                  <div id='c2' class='content content-c'>
    
87.                  Content C
    
88.                  </div>
    
89.                  <div id='d2' class='content  content-d'>
    
90.                  Content D
    
91.                  </div>
    
92.              </div>
    
93. 
    
94. 
    
95. 　　由于和方案一的原理不一样，此处的HTML结构也只能使用Tab和内容分离的结构，使用该结构的一个问题在于当CSS缺失的情况下无法清晰的阅读内容。
    
96. 　　关键的CSS代码如下：
    
97. 
    
98. 
    
99. /*给Tab Content容器设置高度*/
    
100.              #tab_content{
     
101.                  height: 190px;
     
102.                  overflow: hidden;
     
103.              }
     
104.              /*给每个Tab Content定高度，需要与容器保持一致*/
     
105.              #tab_content .content{        
     
106.                  padding: 5px;
     
107.                  -moz-border-radius: 5px;
     
108.                  height: 190px;
     
109.                  overflow: hidden;
     
110.              }
     
111. 
     
112. 
     
113. 　　与方案一一样，这里也通过给Tab以及对应内容设置相同背景色来解决选中识别问题。
     
114. 　　总结
     
115. 　　1. 纯CSS实现的Tab受限很多，比如方案二中需要给每个Tab Content设置相同的高度。
     
116. 　　2. 无法有效的标识当前选中的Tab，本文是通过设置相同背景色做区分，在很多情况下不一定适用。
     
117. 　　3. 两个方案都存在兼容性问题，方案一使用了CSS3的选择符，受限于CSS的实现;而方案二据说在Opera下不灵。
     
118. 　　4. 方案一中，当点击其他会触发:target的锚点(或发生类似交互)时，Tab Content会隐藏。

复制代码