104-(面向对象)tab切换

最新推荐文章于 2024-07-26 11:41:15 发布

七色的天空

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量32

点赞数

分类专栏： 04_JavaScript 文章标签： javascript 原型模式开发语言

本文链接：https://blog.csdn.net/q506174602/article/details/133342802

版权

04_JavaScript 专栏收录该内容

121 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.change{
			width: 600px;
			margin: 100px auto;
		}
		.title{
			overflow: hidden;
		}
		.title span{
			float: left;
			width: 198px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border: 1px solid #000;
		}
		.title .active{
			background-color: orange;
			color: #fff;
		}
		.content p{
			width: 598px;
			height: 200px;
			border: 1px solid #000;
			line-height: 200px;
			text-align: center;
			display: none;
			transition: all .5s;
		}
		.content .select{
			display: block;
			
		}
	</style>
</head>
<body>
	<div class="change">
		<!-- 点击交互区域 -->
		<div class="title">
			<span class="active">标题1</span>
			<span>标题2</span>
			<span>标题3</span>
		</div>
		<!-- 显示切换内容区域 -->
		<div class="content">
			<p class="select">内容1</p>
			<p>内容2</p>
			<p>内容3</p>
		</div>
	</div>
	<script type="text/javascript">
		// 1.变量---属性
		// 2.函数---方法
		// 3.构造函数添加属性		
		// 4.用原型链添加方法
		// 
		
		// 1.变量
		// var spanArr = document.querySelectorAll('.title span');
		// var pArr = document.querySelectorAll('.content p');
		// for(var i = 0; i < spanArr.length; i++) {
		// 	spanArr[i].index = i;
		// 	spanArr[i].onclick = function() {
		// 		// 主要的实现逻辑
		// 		document.querySelector('.active').className = '';
		// 		document.querySelector('.select').className = '';

		// 		this.className = 'active';
		// 		pArr[this.index].className = 'select';
		// 	}
		// }


		function ChangeTab(btn, content) {
			// 1和3.变量---属性
			this.btnArr = document.querySelectorAll(btn);
			this.contentArr = document.querySelectorAll(content);
			

			// 当函数嵌套函数的时候, this指向会被改变
			var _this = this;
			console.log('第一个this',this);
			
			for(var i = 0; i < this.btnArr.length; i++) {
				_this.btnArr[i].index = i; // index叫啥都行
				this.btnArr[i].onclick = function() {
					// 主要的实现逻辑
					// 4.用原型链添加方法
					// 
					// 主要的实现逻辑
					// document.querySelector('.active').className = '';
					// document.querySelector('.select').className = '';

					// this.className = 'active';
					// pArr[this.index].className = 'select';
					// 调用原型上的方法
					_this.change(this);
					console.log('第二个this',this);
					
				}
			}
		}

		// 用原型链添加共享方法
		ChangeTab.prototype.change = function(eleObj) {
			document.querySelector('.active').className = '';
			document.querySelector('.select').className = '';

			// this.className = 'active';
			// pArr[this.index].className = 'select';

			eleObj.className = 'active';
			this.contentArr[eleObj.index].className = 'select';
		}


		var tab = new ChangeTab('.title span', '.content p');
	</script>
</body>
</html>

上述运行结果：