面向对象-选项卡 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>面向对象-选项卡</title>
 6     <style type="text/css">
 7         * { margin:0; padding:0; }
 8         li { list-style: none; }
 9         a { text-decoration:none; }
10         
11         body { background-color:#f0f0f0; }
12         .tab-box { width:300px; height:200px; margin:20px auto; }
13         .tab-item { font-size:0; }
14         .tab-item a { line-height:30px; background-color:#666; padding:4px 15px; color:#fff; font-size:14px; -webkit-text-size-adjust:none; margin-right:3px; }
15         .tab-con { position:relative; }
16         .con-box { position:absolute; top:0; left:0; width:298px; height:100px; border:1px solid #999; background-color:#fff; line-height:100px; text-align:center; display:none; }
17         .tab-item a.active { background:#ff0f0f; }
18         .tab-con .show { display:block; }
19     </style>
20 
21 <script type="text/javascript">
22     window.onload = function (){
23         var tabOne = new Tab('tab-box1');
24         tabOne.init();
25 
26         var tabTwo = new Tab('tab-box2');
27         tabTwo.init();
28     };
29 </script>
30 </head>
31 <body>
32     <div class="tab-box" id="tab-box1">
33         <nav class="tab-item">
34             <a class="item-btn active" href="javascript:;">第一项</a>
35             <a class="item-btn" href="javascript:;">第二项</a>
36             <a class="item-btn" href="javascript:;">第三项</a>
37         </nav>
38         <ul class="tab-con">
39             <li class="con-box show">这是第一项的内容</li>
40             <li class="con-box">这是第二项的内容</li>
41             <li class="con-box">这是第三项的内容</li>
42         </ul>
43     </div>
44 
45 
46     <div class="tab-box" id="tab-box2">
47         <nav class="tab-item">
48             <a class="item-btn active" href="javascript:;">第一项</a>
49             <a class="item-btn" href="javascript:;">第二项</a>
50             <a class="item-btn" href="javascript:;">第三项</a>
51         </nav>
52         <ul class="tab-con">
53             <li class="con-box show">这是第一项的内容</li>
54             <li class="con-box">这是第二项的内容</li>
55             <li class="con-box">这是第三项的内容</li>
56         </ul>
57     </div>
58 
59 <script type="text/javascript">
60 
61 function Tab(obj){
62     //获取选项卡对象
63     this.oItem = document.getElementById(obj);
64     //获取选项卡按钮集合
65     this.aBtn = this.oItem.getElementsByTagName('a');
66     //获取选项卡内容集合
67     this.aConBox = this.oItem.getElementsByTagName('li');
68 
69     //计算选项卡数量
70     this.len = this.aBtn.length;
71 }
72 
73 Tab.prototype.init = function(){
74     var _this = this;
75     for(var i=0; i<this.len; i++){
76         this.aBtn[i].index = i;
77         this.aBtn[i].onclick = function(){
78             _this.change(this);
79         }
80     }
81 }
82 
83 Tab.prototype.change = function(obj){
84     for(var i=0; i<this.len; i++){
85         this.aBtn[i].className = '';
86         this.aConBox[i].style.display = 'none';
87     }
88     obj.className = 'active';
89     this.aConBox[obj.index].style.display = 'block';
90 }
91 
92 </script>
93 
94 </body>
95 </html>

 

posted @ 2016-11-12 00:47  Robert-Lau  阅读(248)  评论(0)    收藏  举报