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>
时间： 2024-10-24 13:27:35