面向对象改成选项卡

View Code 
window.onload=function()
{
    new Tab('div1');
};

function Tab(id)
{
    var _this=this;
    var oDiv=document.getElementById(id);
    
    this.aBtn=oDiv.getElementsByTagName('input');
    this.aDiv=oDiv.getElementsByTagName('div');               
    
    for(var i=0;i<this.aBtn.length;i++)
    {
        this.aBtn[i].index=i;
        this.aBtn[i].onclick=function()
        {
            _this.TabDiv(this);
        };
    };
};

Tab.prototype.TabDiv=function(oBtn)
{
    for(var i=0;i<this.aBtn.length;i++)
    {
        this.aBtn[i].className='';
        this.aDiv[i].style.display='none';
    };
    oBtn.className='active';
    this.aDiv[oBtn.index].style.display='block';
};
 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 #div1 div{width:200px;height:200px;border:solid 1px #000;display:none;}
 8 .active{background:yellow;}
 9 </style>
10 <script>
11 /*面向过程*/
12 /*
13 window.onload=function()
14 {
15     var oDiv=document.getElementById('div1');
16     var aBtn=oDiv.getElementsByTagName('input');
17     var aDiv=oDiv.getElementsByTagName('div');
18     
19     for(var i=0;i<aBtn.length;i++)
20     {
21         aBtn[i].index=i
22         aBtn[i].onclick=function()
23         {
24             for(var i=0;i<aBtn.length;i++)
25             {
26                 aBtn[i].className='';
27                 aDiv[i].style.display='none';
28             };
29                 this.className='active';
30                 aDiv[this.index].style.display='block';
31         };
32     };
33 };
34 */
35 /*面向对象*/
36 window.onload=function()
37 {
38     new Tab('div1');
39 };
40 
41 function Tab(id)
42 {
43     var _this=this;
44     var oDiv=document.getElementById(id);
45     
46     this.aBtn=oDiv.getElementsByTagName('input');
47     this.aDiv=oDiv.getElementsByTagName('div');               
48     
49     for(var i=0;i<this.aBtn.length;i++)
50     {
51         this.aBtn[i].index=i;
52         this.aBtn[i].onclick=function()
53         {
54             _this.TabDiv(this);
55         };
56     };
57 };
58 
59 Tab.prototype.TabDiv=function(oBtn)
60 {
61     for(var i=0;i<this.aBtn.length;i++)
62     {
63         this.aBtn[i].className='';
64         this.aDiv[i].style.display='none';
65     };
66     oBtn.className='active';
67     this.aDiv[oBtn.index].style.display='block';
68 };
69 </script>
70 </head>
71 
72 <body>
73 <div id="div1">
74 <input type="button" value="aaa" class="active" />
75 <input type="button" value="bbb" />
76 <input type="button" value="ccc" />
77 <div style="display:block;">111111111111</div>
78 <div>2222222222222</div>
79 <div>33333333333333</div>
80 </div>
81 </body>
82 </html>

 

posted @ 2013-04-11 11:25  yexingwen  阅读(181)  评论(0)  编辑  收藏  举报