ES6语法，面向对象、继承版自动轮播选项卡

最新推荐文章于 2024-07-14 12:56:18 发布

JoZq

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量142

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_45838680/article/details/107106939

版权

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
input.active{
	background: red;
}

#box > div{
	width: 200px;height: 200px;background: #ccc;
	display: none;
}
#box > div:first-of-type{
	display: block;
}


#ccc > div{
	width: 200px;height: 200px;background: #ccc;
	display: none;
}
#ccc > div:first-of-type{
	display: block;
}
    </style>
</head>
<body>
<div id='box'>
	<input type='button' value='1' class='active'>
	<input type='button' value='2'>
	<input type='button' value='3'>
	<div>aaaaa</div>
	<div>bbbbb</div>
	<div>ccccc</div>
</div>
<div id='ccc'>
	<input type='button' value='1' class='active'>
	<input type='button' value='2'>
	<div>aaaaa</div>
	<div>ccccc</div>
</div>
<script type="text/javascript">
	class tab {
		constructor(x){
			this.node = document.getElementById(x);
			this.allIput = this.node.getElementsByTagName('input');
			this.allDiv = this.node.getElementsByTagName('div');
			this.index = 0;

			this.init();
		}
		init(){
			for(let i = 0;i < this.allIput.length;i++){
				this.allIput[i].onclick = function(){
					this.hide();
					this.show(i);
				}.bind(this);
			}
		}
		hide(){
			for(let i = 0;i < this.allIput.length;i++){
				this.allIput[i].className = '';
				this.allDiv[i].style.display ='none';
			}
		}
		show(index){
			this.allDiv[index].style.display ='block';
			this.allIput[index].className ='active';
		}


	}
	class autoTab extends tab{
		constructor(x){
			super(x);
		}
		autoPlay(){  
			setInterval(()=>{
				this.index++;
				if(this.index == this.allIput.length)this.index = 0;
				this.hide();
				this.show(this.index);
			},1000);
		}
	}

new tab('box')
new autoTab('ccc').autoPlay();


</script>




</body>
</html>

JoZq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6语法，面向对象、继承版自动轮播选项卡

<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css">input.active{ background: red;}#box > div{ width: 200px;height: 200px;background: #ccc; display
复制链接

扫一扫