【Css】一个简单的选项卡

浏览数：40 / 时间：2015年06月09日

这次来做一个简单的选项卡。

选项卡其实就分3个部分：html代码，用于显示的内容；css代码，用于显示的样式；javascript代码，用于点击事件。

老规矩，先写一个html坯子。

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5         <title>选项卡</title>
 6     </head>
 7     
 8     <body>
 9         <div id="tab">        
10             <h3 class="active">教育</h3>
11             <h3>娱乐</h3>
12             <h3>汽车</h3>
13             
14             <div class="content">教育内容</div>
15             <div>娱乐内容</div>
16             <div>汽车内容</div>                     
17         </div>
18     </body>
19 </html>

html代码里只给“教育”和“教育内容”设置class的目的是为了做一个标记，表示这个是点选或者默认显示的内容。

效果：

接下来，我们给整个块加一个框，并且给各个元素都加上边框，这样看得更清楚一些。

 1 <style type="text/css">
 2     #tab {
 3     border: 2px solid;
 4     }
 5     #tab h3 {
 6     border: 1px solid #cccccc; 
 7     }
 8     #tab div {
 9     border: 1px solid #cccccc;
10     }
11 </style>

效果：

我们把3个标题向左浮动，并且调整一下字体的大小，布局等等。

 1 <style type="text/css">
 2     #tab {
 3         border: 2px solid;
 4     }
 5     #tab h3 {
 6         border: 1px solid #cccccc;
 7         margin: 2px 1px 0px 1px;
 8         padding: 0px;
 9         font-size: 14px;
10         float: left;
11         right: 5px;                
12         width: 60px;
13         height: 24px;
14         line-height: 24px;
15         text-align: center; 
16     }
17     #tab div {
18         border: 1px solid #cccccc;
19     }
20 </style>

效果：

3个标题貌似被盖住了...

这是由于标题浮动引起的。

我们把内容给clear一下就行了。

 1 <style type="text/css">
 2     #tab {
 3         border: 2px solid;
 4     }
 5     #tab h3 {
 6         border: 1px solid #cccccc;
 7         margin: 2px 1px 0px 1px;
 8         padding: 0px;
 9         font-size: 14px;
10         float: left;
11         right: 5px;                
12         width: 60px;
13         height: 24px;
14         line-height: 24px;
15         text-align: center; 
16     }
17     #tab div {
18         clear: both;
19         border: 1px solid #cccccc;
20     }
21 </style>

效果：

这样看起来好一些，不过距离目的还差得远。

接下来，我们设置内容的样式。设置了父框的宽度，并且将整个父元素块居中。

 1 <style type="text/css">
 2     #tab {
 3         border: 2px solid;
 4         width: 500px;
 5         margin: 0 auto;
 6     }
 7     #tab h3 {
 8         border: 1px solid #cccccc;
 9         margin: 2px 1px 0px 1px;
10         padding: 0px;
11         font-size: 14px;
12         float: left;
13         right: 5px;                
14         width: 60px;
15         height: 24px;
16         line-height: 24px;
17         text-align: center; 
18     }
19     #tab div {
20         border: 1px solid #cccccc;
21         clear: both;
22         height: 100px;
23         font-size: 14px;
24         padding: 20px 0px 0px 20px;            
25     }
26 </style>

效果：

这样看起来就舒服多了！

至于如何体现选项卡的效果，我们通过内容的显示与隐藏来控制。display:[none block]

 1 <style type="text/css">
 2     #tab {
 3         border: 2px solid;
 4         width: 500px;
 5         margin: 0 auto;
 6     }
 7     #tab h3 {
 8         border: 1px solid #cccccc;
 9         margin: 2px 1px 0px 1px;
10         padding: 0px;
11         font-size: 14px;
12         float: left;
13         right: 5px;                
14         width: 60px;
15         height: 24px;
16         line-height: 24px;
17         text-align: center; 
18     }
19     #tab div {
20         border: 1px solid #cccccc;
21         clear: both;
22         height: 100px;
23         font-size: 14px;
24         padding: 20px 0px 0px 20px;    
25         display: none;        
26     }
27     #tab div.content {
28         display: block;
29     }
30 </style>

效果：

这里只看到了“教育内容”，其他内容则被隐藏了。

如何凸现哪个被点选和内容的显示呢，我们给他设置背景颜色。

1 #tab h3.active {
2     background: #cccc00;
3 }
4 #tab div.content {
5     display: block;
6     background: #cccc00;
7 }

效果：

现在这个还是一个固定的显示，我们给3个标题注册点击事件，通过点击标题切换标题和内容的标记class，来达到切换选项卡的目的。

 1 <script type="text/javascript">
 2     window.onload = function() {
 3         var oTab = document.getElementById("tab");
 4         var aH3 = oTab.getElementsByTagName("h3");
 5         var aDiv = oTab.getElementsByTagName("div");
 6         for (var i = 0; i < aH3.length; i++) {
 7             aH3[i].index = i;
 8             aH3[i].onclick = function() {
 9                 for (var i = 0; i < aH3.length; i++) {
10                 　　aH3[i].className = "";
11                 　　aDiv[i].style.display = "none";
12                 　　aDiv[this.index].className = "";
13                 　　aDiv[this.index].className = "content";
14                 }
15                 this.className = "active";
16                 aDiv[this.index].style.display = "block";
17             };
18         }
19     };
20 </script>

这样我们点击其他标题

最后我们给微调下，去除表框，添加阴影，附上完整代码:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5         <title>选项卡</title>
 6         <style type="text/css">
 7             #tab {
 8                 width: 500px;
 9                 margin: 0 auto;
10                 box-shadow: 5px 5px 5px #888888;
11             }
12             #tab h3 {
13                 margin: 0px;
14                 padding: 0px;
15                 font-size: 14px;
16                 float: left;
17                 right: 5px;                
18                 width: 60px;
19                 height: 24px;
20                 line-height: 24px;
21                 text-align: center; 
22             }
23             #tab div {
24                 clear: both;
25                 height: 100px;
26                 font-size: 14px;
27                 padding: 20px 0px 0px 20px;    
28                 display: none;        
29             }
30             #tab h3.active {
31                 background: #cccc00;
32             }
33             #tab div.content {
34                 display: block;
35                 background: #cccc00;
36             }
37         </style>
38         
39         <script type="text/javascript">
40             window.onload = function() {
41                 var oTab = document.getElementById("tab");
42                 var aH3 = oTab.getElementsByTagName("h3");
43                 var aDiv = oTab.getElementsByTagName("div");
44                 for (var i = 0; i < aH3.length; i++) {
45                     aH3[i].index = i;
46                     aH3[i].onclick = function() {
47                         for (var i = 0; i < aH3.length; i++) {
48                             aH3[i].className = "";
49                             aDiv[i].style.display = "none";
50                             aDiv[this.index].className = "";
51                             aDiv[this.index].className = "content";
52                         }
53                         this.className = "active";
54                         aDiv[this.index].style.display = "block";
55                     };
56                 }
57             };
58         </script>
59     </head>
60     
61     <body>
62         <div id="tab">        
63             <h3 class="active">教育</h3>
64             <h3>娱乐</h3>
65             <h3>汽车</h3>
66             
67             <div class="content">教育内容</div>
68             <div>娱乐内容</div>
69             <div>汽车内容</div>                     
70         </div>
71     </body>
72 </html>