js面向对象选项卡（this的使用）

小灰灰 2024-02-17 23:26 37阅读 0赞

案例1;面向过程选项卡

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			#div1 {background: white;display: block;}
    			#div1 input {background: gray;}
    			#div1 input.checked {background: red;}
    			
    			div {height: 200px;width: 200px;background: green;display: none;}
    		</style>
    		
    		<script>
    			window.onclick = function(){
    				var oDiv1 = document.getElementById("div1");
    				var aBtn = oDiv1.getElementsByTagName("input");
    				
    				var aDiv = document.getElementsByTagName("div"); //oDiv1 == aDiv[1]
    				
    				for(var i = 0; i < aBtn.length; i++){
    					aBtn[i].index = i;
    					aBtn[i].onclick = function(){
    						for(var j = 0; j < aBtn.length; j++){
    							aBtn[j].className = "";
    							
    							aDiv[j+1].style.display = 'none';
    						}
    						this.className = 'checked';
    						aDiv[this.index+1].style.display = 'block';
    					}
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<div id = "div1">
    			<input type = "button" value = 'aaa' class="checked"/>
    			<input type = "button" value = 'bbb'/>
    			<input type = "button" value = 'ccc'/>
    		</div>
    		
    		<div>aaa</div>
    		<div>bbb</div>
    		<div>ccc</div>
    	</body>
    </html>

案例2：面向对象选项卡

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			#div1 {background: white;display: block;}
    			#div1 input {background: gray;}
    			#div1 input.checked {background: red;}
    			
    			div {height: 200px;width: 200px;background: green;display: none;}
    		</style>
    		
    		<script>
    			//onload的作用，相当于加载、初始化
    			window.onload = function(){
    				new TabSwitch('div1');
    			}
    			
    			function TabSwitch(id){           //构造函数
    				this.oDiv1 = document.getElementById(id);           //this是指当前所创建的那个对象
    				this.aBtn = document.getElementsByTagName("input");
    				
    				this.aDiv = document.getElementsByTagName("div"); //oDiv1 == aDiv[1]
    				
    				var _this = this;      //保存this对象
    				
    				for(var i = 0; i < this.aBtn.length; i++){
    					this.aBtn[i].index = i;
    					this.aBtn[i].onclick = function(){
    						_this.fnClick(this);  //这里this表示aBtn
    					}
    				}
    			}
    			
    			TabSwitch.prototype.fnClick = function(oBtn){
    						for(var j = 0; j < this.aBtn.length; j++){
    							this.aBtn[j].className = "";
    							
    							this.aDiv[j+1].style.display = 'none';
    						}
    						oBtn.className = 'checked';
    						this.aDiv[oBtn.index+1].style.display = 'block';
    					}
    			
    		</script>
    	</head>
    	<body>
    		<div id = "div1">
    			<input type = "button" value = 'aaa' class="checked"/>
    			<input type = "button" value = 'bbb'/>
    			<input type = "button" value = 'ccc'/>
    		</div>
    		
    		<div>aaa</div>
    		<div>bbb</div>
    		<div>ccc</div>
    	</body>
    </html>