面向对象选项卡 

 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 　　

 

posted @ 2013-08-11 13:46  The0ne  阅读(93)  评论(0)    收藏  举报