面向对象选项卡ES5 ES6_es5面向对象 tab-CSDN博客

本文链接：https://blog.csdn.net/m0_62358560/article/details/120686090

该博客对比了使用ES5和ES6两种不同的JavaScript语法实现选项卡组件的方式。在ES5中，通过创建`Tab`构造函数和原型链实现点击切换效果；而在ES6中，利用类`star`进行构造，通过类的方法实现显示和隐藏内容。两者都是对DOM元素的操作，展示了面向对象编程在不同JavaScript版本下的应用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>ES5面向对象选项卡</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			.tabMenu {
				width: 300px;
				margin: 40px auto 0;
			}

			.tabMenu ul {
				display: block;
				overflow: hidden;
				width: 300px;
				height: 40px;
				background: #eee;
			}

			.tabMenu ul li {
				cursor: pointer;
				display: block;
				float: left;
				width: 100px;
				text-align: center;
				height: 40px;
				line-height: 40px;
				font-size: 16px;
			}

			.tabMenu ul li.active {
				background: #f00;
				color: #fff;
			}

			.tabMenu .tabSide {
			  display: none;
			  padding: 10px;
			  line-height: 20px;
			  white-space: pre-wrap;
			  word-break: break-all;
			  width: 278px;
			  border: solid 1px #eee;
			}

			.tabMenu div.active {
				display: block;
				padding: 10px;
				line-height: 20px;
				white-space: pre-wrap;
				word-break: break-all;
				width: 278px;
				border: solid 1px #eee;
			}
		</style>
	</head>
	<body>
		<div id="tabMain" class="tabMenu">
			<ul>
				<li class="active">选项一</li>
				<li>选项二</li>
				<li>选项三</li>
			</ul>
			<div class="tabSide active">合肥</div>
			<div class="tabSide">南京</div>
			<div class="tabSide">上海</div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload =function() {
			var main = document.getElementById("tabMain");
			var tab = new Tab(main);
			tab.init();
		}

		function Tab(id) {
			this.aLi = id.getElementsByTagName("li");
			this.oDiv = id.getElementsByTagName("div");
		}
		Tab.prototype.init = function() {
			var obj = this;
			for (var index = 0; index < obj.aLi.length; index++) {
				obj.aLi[index].index = index;
				obj.aLi[index].onclick = function() {
					obj.fnClick(this);
				}
			}
		}

		Tab.prototype.fnClick = function(aLi) {
			for (var index = 0; index < this.aLi.length; index++) {
				this.aLi[index].className = "";
				this.oDiv[index].style.display = "none";
			}
			aLi.className = "active";
			this.oDiv[aLi.index].style.display = "block";
		};
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>ES6面向对象选项卡</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			.tabMenu {
				width: 300px;
				margin: 40px auto 0;
			}

			.tabMenu ul {
				display: block;
				overflow: hidden;
				width: 300px;
				height: 40px;
				background: #eee;
			}

			.tabMenu ul li {
				cursor: pointer;
				display: block;
				float: left;
				width: 100px;
				text-align: center;
				height: 40px;
				line-height: 40px;
				font-size: 16px;
			}

			.tabMenu ul li.active {
				background: #f00;
				color: #fff;
			}

			.tabMenu .tabSide {
				display: none;
				padding: 10px;
				line-height: 20px;
				white-space: pre-wrap;
				word-break: break-all;
				width: 278px;
				border: solid 1px #eee;
			}

			.tabMenu div.active {
				display: block;
				padding: 10px;
				line-height: 20px;
				white-space: pre-wrap;
				word-break: break-all;
				width: 278px;
				border: solid 1px #eee;
			}
		</style>
	</head>
	<body>
		<div id="tabMain" class="tabMenu">
			<ul>
				<li class="active">选项一</li>
				<li>选项二</li>
				<li>选项三</li>
			</ul>
			<div class="tabSide active">合肥</div>
			<div class="tabSide">南京</div>
			<div class="tabSide">上海</div>
		</div>

		<script>
			class star {
				constructor(id) {
					this.all = document.getElementById(id);
					this.allLi = this.all.getElementsByTagName('li');
					this.allDiv = this.all.getElementsByTagName('div');
					this.init();
				}
				
				init() {
					for (let i = 0; i < this.allLi.length; i++) {
						this.allLi[i].onclick = function() {
							this.hide();
							this.show(i);
						}.bind(this);
					}
				}
				
				show(index) {
					this.allLi[index].className = 'active';
					this.allDiv[index].style.display = 'block';
				}
				
				hide() {
					for (let i = 0; i < this.allLi.length; i++) {
						this.allLi[i].className = '';
					}

					for (let j = 0; j < this.allDiv.length; j++) {
						this.allDiv[j].style.display = 'none';
					}
				}
			}
			new star('tabMain');
		</script>
	</body>

</html>