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