js选项卡代码详解

最新推荐文章于 2023-07-01 18:20:34 发布

置顶女王的禅师范

最新推荐文章于 2023-07-01 18:20:34 发布

阅读量771

点赞数

分类专栏： js 文章标签：选项卡

本文链接：https://blog.csdn.net/qq_34146679/article/details/85318809

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

js选项卡

	<body>
		<input type="button" name="" id="btn1" value="选项一" style="background-color: yellow;"/>
		<input type="button" name="" id="btn2" value="选项二"/>
		<input type="button" name="" id="btn3" value="选项三"/>
		<div style="display:block;">1111</div>
		<div>2222</div>
		<div>3333</div>
		
	<script>
		var input1=document.querySelectorAll('input');
		var div1=document.querySelectorAll('div');
		var last=input1[0];//这个变量存的是上一次的对象        

		for(var i=0;i<input1.length;i++){
			
			input1[i].index=i;
			//自定义属性
				
			input1[i].onclick=function(){
				//把上一次点击对象的背景色去掉
				last.style.background='';
				
				//把上一个对应的div，让它隐藏
				div1[last.index].style.display='none';
				
				//给当前点击的那个按钮添加背景色
				this.style.background='yellow';
				
				//让当前点击的按钮对应的div，显示
				div1[this.index].style.display='block';
				
				last=this;//把上一次点击的对象更新成当前点击的对象
			}
		}