首页 > 代码库 > 【Css】一个简单的选项卡
【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>
效果：
这个选项卡只有最基本的功能。如果进一步，我们可以在内容块里加入图片库，把标题背景设置为图片，这样就能做出很漂亮的选项卡。
【Css】一个简单的选项卡
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。