【Css】一個簡單的選項卡

本文轉載自查看原文 2014-10-22 23:10 12851 CSS、選項卡

這次來做一個簡單的選項卡。

選項卡其實就分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>

效果：

這個選項卡只有最基本的功能。如果進一步，我們可以在內容塊里加入圖片庫，把標題背景設置為圖片，這樣就能做出很漂亮的選項卡。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue實現一個簡單的選項卡用css實現選項卡 JS入門學習，寫一個簡單的選項卡如何使用Vue寫一個簡單的選項卡功能純CSS制作的TAB選項卡自創簡易CSS Tab 選項卡 css 做圖形 tabbar選項卡 css實現帶箭頭選項卡 JQ超簡單多個選項卡用angular制作簡單的選項卡