这次来做一个简单的选项卡。
选项卡其实就分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 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 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 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 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 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 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 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 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>
效果：
这个选项卡只有最基本的功能。如果进一步，我们可以在内容块里加入图片库，把标题背景设置为图片，这样就能做出很漂亮的选项卡。