ES6 使用面向对象实现选项卡

最新推荐文章于 2022-07-26 11:19:18 发布

前方太黑暗

最新推荐文章于 2022-07-26 11:19:18 发布

阅读量1.7k

点赞数 1

分类专栏： ES6 文章标签： ES6 面向对象

本文链接：https://blog.csdn.net/xcc_2269861428/article/details/80832455

版权

ES6 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

选项卡样子

<html>

<head>
<title>ES6面向对象</title>
<style>
input.active{
   background:red;
}
#first > div {
    width:200px;
	height:200px;
	background:#ccc;
	display:none;
}
#first > div:first-of-type{
   display:block;
}
</style>

</head>

<body>
	<div id="first">
		<input type="button" value="1" class="active">
		<input type="button" value="2">
		<input type="button" value="3">
		<div>第一个界面</div>
		<div>第二个界面</div>
		<div>第三个界面</div>
	</div>
	
	<script>
		class Tab{
		  constructor(id){
			//1.选中摸一个区域内的元素
			this.all = document.getElementById(id);
			//2.获取所有的input
			this.allInput = this.all.getElementsByTagName('input');
			//3.获取所有的div
			this.allDiv = this.all.getElementsByTagName('div');
			this.init();
		  }
		  
		  init(){
			//4.为所有的input添加事件
			for(let i=0;i<this.allInput.length;i++){
				this.allInput[i].onclick = function(){
				  this.hide();
				  this.show(i);
				}.bind(this);
			}
		  }
		  
		  //显示
		  show(index){
			this.allInput[index].className = 'active';
			this.allDiv[index].style.display = 'block';
		  }
		  
		  //隐藏
		  hide(){
			for(let i=0;i<this.allInput.length;i++){
				this.allInput[i].className = '';
			}
			
			for(let j=0;j<this.allDiv.length;j++){
				this.allDiv[j].style.display = 'none';
			}
		  }
		}

		new Tab('first');
	</script>
</body>

</html>

前方太黑暗

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
ES6 使用面向对象实现选项卡

选项卡样子&lt;html&gt;&lt;head&gt;&lt;title&gt;ES6面向对象&lt;/title&gt;&lt;style&gt;input.active{ background:red;}#first &gt; div { width:200px; height:200px; background:#ccc; display:none;}...
复制链接

扫一扫