1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>面向对象选项卡</title>
6 <style>
7 *{margin:0;padding:0;}
8 ul{list-style:none;}
9 .tab{margin:30px;}
10 .tab ul{display:none;}
11 </style>
12 <script>
13 window.onload=function()
14 {
15 var oTabA = new tabSwitch('tab');
16 var oTabA2= new tabSwitch('tab2');
17 };
18 function tabSwitch(id)
19 {
20 var oTab = document.getElementById(id);
21 this.aTabA = oTab.getElementsByTagName('a');
22 this.aUl = oTab.getElementsByTagName('ul');
23 var _this = this;
24 for(var i=0;i<this.aTabA.length;i++)
25 {
26 this.aTabA[i].index=i;
27 this.aTabA[i].onclick=function(){
28 _this.tab(this);
29 };
30 }
31 };
32 tabSwitch.prototype.tab=function(oBtn)
33 {
34 for(var i=0;i<this.aTabA.length;i++)
35 {
36 this.aUl[i].style.display='none';
37 };
38 this.aUl[oBtn.index].style.display='block';
39 };
40 </script>
41 </head>
42
43 <body>
44 <div id="tab" class="tab">
45 <div id="tabTit">
46 <a href="#">tab1</a>
47 <a href="#">tab2</a>
48 <a href="#">tab3</a>
49 </div>
50 <ul style="display:block;">
51 <li>tab1</li>
52 </ul>
53 <ul>
54 <li>tab2</li>
55 </ul>
56 <ul>
57 <li>tab3</li>
58 </ul>
59 </div>
60
61 <div id="tab2" class="tab">
62 <div id="tabTit2">
63 <a href="#">tab1</a>
64 <a href="#">tab2</a>
65 <a href="#">tab3</a>
66 </div>
67 <div id="tabMain">
68 <ul style="display:block;">
69 <li>tab1</li>
70 </ul>
71 <ul>
72 <li>tab2</li>
73 </ul>
74 <ul>
75 <li>tab3</li>
76 </ul>
77 </div>
78 </div>
79 </body>
80 </html>
81
