选项卡_oop

	
		
   
   
		
		
	
	
		
   
   

			
    
    
1
2
3
			
    
    

     
     内容1
    
    
			
    
    

     
     内容2
    
    
			
    
    

     
     内容3
    
    
			
		
   
   
	
	<script>
		window.onload = function(){
			var t1 = new Tab("container");
			t1.init();
		}
		function Tab(id){
			this.li_list = document.getElementsByTagName('li');
			this.ctn = document.getElementsByClassName(id)[0];
			this.div_list = this.ctn.getElementsByTagName('div');
		}
		Tab.prototype.init = function(){
			var This = this;
			for(var i = 0;i < this.li_list.length;i++){
				this.li_list[i].index = i;
				this.li_list[i].onclick = function(){
					This.changeTab(this);
				}
			}
		}
		Tab.prototype.changeTab = function(obj){
			for(var j = 0;j < this.li_list.length;j++){ //这个this指向的是this.li_list[i] 就是按钮 按钮下面没有这些属性
				this.li_list[j].className = '';//同上
				this.div_list[j].style.display = 'none';//同上
			}
			obj.className = 'bg'; //这个也是代指按钮 按钮有className属性    
			this.div_list[obj.index].style.display = 'block'; //前者也是按钮但按钮没有这个属性所以不对  后者也是按钮而且其由index属性正确
			return false;
		}	
		//问题就是出在changeTab里的this里，我们要想办法把它给替换掉  This
	</script>