javascript面向对象——tabs实例

面向过程—>面向对象

之前在未学习面向对象时，我们都是面向过程编程的。它的优点就是简单，明了，下面就来把面向过程的tabs切换改写成面向对象的方式。

html：

 1 <div class="tabs" id="tabs1">
 2         <ul class="tabs-nav">
 3             <li class="active"><a href="javascript:;">折扣</a></li>
 4             <li><a href="javascript:;">活动</a></li>
 5             <li><a href="javascript:;">优惠</a></li>
 6             <li><a href="javascript:;">其他</a></li>
 7         </ul>
 8         <div class="tabs-cnt">
 9             <div class="tabs-content">
10                 11111111
11             </div>
12             <div class="tabs-content">
13                 2222
14             </div>
15             <div class="tabs-content">
16                 3333
17             </div>
18             <div class="tabs-content">
19                 4444
20             </div>
21         </div>        
22     </div>

css:

*{ margin:0; padding:0; list-style:none;}

.tabs{ margin:10px;}

.tabs-nav:before, .tabs-nav:after{ display:table; content:' ';}
.tabs-nav:after{ width:100%; clear:both; border-bottom:1px solid #47a3da;}
.tabs-nav li{ position:relative; float:left; margin-right:5px; border:1px solid #becbd2; border-bottom:none;}
.tabs-nav li.active:after{ position:absolute; bottom:-1px; width:100%; display:block; content:' '; border-bottom:1px solid #fff;}
.tabs-nav a{ display:block; padding:0 20px; line-height:30px; text-decoration:none; color:#000; font-size:14px;}

.tabs-cnt{ padding:10px;}
.tabs-content{ display:none;}
.tabs-content:first-child{ display:block;}

javascript:

 1 window.οnlοad=function(){
 2     var oTabs=document.getElementById('tabs1');
 3     var aTabsNav=oTabs.querySelectorAll('.tabs-nav li');
 4     var aTabsCnt=oTabs.querySelectorAll('.tabs-content');
 5     
 6     for(var i=0;i<aTabsNav.length;i++){
 7         aTabsNav[i].index=i;
 8         aTabsNav[i].οnclick=function(){
 9             for(var i=0;i<aTabsNav.length;i++){
10                 aTabsNav[i].className='';
11                 aTabsCnt[i].style.display='none';
12             }
13             this.className='active';
14             aTabsCnt[this.index].style.display='block';
15         };
16     }
17 };

效果：

改写成面向对象：

需要注意的几点：1.不能有函数嵌套 2.变量改为属性 3.函数改为方法 4.this的指向问题

 1 function tabSwitch(id){
 2     var _this=this;
 3     this.oTabs=document.getElementById(id);
 4     this.aTabsNav=this.oTabs.querySelectorAll('.tabs-nav li');
 5     this.aTabsCnt=this.oTabs.querySelectorAll('.tabs-content');
 6     
 7     for(var i=0;i<this.aTabsNav.length;i++){
 8         this.aTabsNav[i].index=i;
 9         this.aTabsNav[i].οnclick=function(){
10             _this.tab(this);
11         };
12     }
13 }
14 
15 tabSwitch.prototype.tab=function(oTabsNav){
16     for(var i=0;i<this.aTabsNav.length;i++){
17         this.aTabsNav[i].className='';
18         this.aTabsCnt[i].style.display='none';
19     }
20     oTabsNav.className='active';
21     this.aTabsCnt[oTabsNav.index].style.display='block';    
22 };
23 
24 new tabSwitch('tabs1');

 

 

 

转载于:https://www.cnblogs.com/lostyu/p/3651072.html