面向对象-选项卡
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了面向对象-选项卡相关的知识，希望对你有一定的参考价值。
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>
以上是关于面向对象-选项卡的主要内容，如果未能解决你的问题，请参考以下文章