es6使用let与const，简化tab栏

最新推荐文章于 2020-03-09 20:27:59 发布

微机原理通识

最新推荐文章于 2020-03-09 20:27:59 发布

阅读量221

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_41556165/article/details/85078607

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<script>
$.ready(){
	var buttons = document.querySelectorAll('button');
	var ps = document.querySelectorAll('p');
	
	for(var i=0; i<buttons.length; i++){
		buttons[i].index = i;
		buttons[i].onclick = function(){
			console.log(this.index);
			
			for(var i=0; i<buttons.length; i++){
				buttons[i].className = '';
				ps[i].className = '';
			}
		
			this.className = 'active';
			ps[this.index].className = 'active';
		}
	}
}
</script>

使用let简化this.index = i操作

for(let i=0; i<buttons.length; i++){
		buttons[i].index = i;
		buttons[i].onclick = function(){
			for(let i=0; i<buttons.length; i++){
				buttons[i].className = '';
				ps[i].className = '';
			}
		
			this.className = 'active';
			ps[i].className = 'active';
		}
	}