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

最新推荐文章于 2022-11-29 00:26:33 发布

柏油

最新推荐文章于 2022-11-29 00:26:33 发布

阅读量1.6k

点赞数

分类专栏： # JAVA WEB

本文链接：https://blog.csdn.net/ldw201510803006/article/details/75233682

版权

JAVA WEB 专栏收录该内容

59 篇文章 3 订阅

订阅专栏

案例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>

柏油

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
js面向对象选项卡（this的使用）

案例1;面向过程选项卡 #div1 {background: white;display: block;} #div1 input {background: gray;} #div1 input.checked {background: red;} div {height: 200px;width: 200px;background: g
复制链接

扫一扫