简易选项卡

最新推荐文章于 2022-09-26 22:03:42 发布

Dark Sky！

最新推荐文章于 2022-09-26 22:03:42 发布

阅读量4.7k

点赞数

本文链接：https://blog.csdn.net/m0_52884799/article/details/110713278

版权

简易选项卡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{margin: 0; padding: 0;}
			#box{width: 220px; height: 220px; margin: 200px auto;}
			#box div{width: 200px; height: 200px; background: #ccc; display: none;}
			#box .on{background: pink;}
		</style>
		<script>
			window.onload=function(){
				var oBox=document.getElementById('box');
				var aBtn=oBox.getElementsByTagName('input');/*Btn:button:按钮*/
				var aDiv=oBox.getElementsByTagName('div');
				
				//选项卡的核心:先清空所有，才执行当前;
				
				//操作一组元素，使用循环
				for (var i=0;i<aBtn.length;i++) {
					//自定义一个属性，保存每一个元素的下标;
					aBtn[i].index=i;
					//操作一组元素中的某一个的时候，使用下标;
					aBtn[i].onclick=function(){
						//先清空所有的样式;
						for (var i=0;i<aBtn.length;i++) {
							aBtn[i].className='';
							aDiv[i].style.display='none';
						}
						//谁触发了事件，this就是谁
						this.className='on';
						aDiv[this.index].style.display='block';
					};
				}
			}
		</script>
	</head>
	<body>
		<!-- 
			选项卡对于布局的要求:
				一一对应;
		 -->
		<div id="box">
			<input type="button" value="aaa" class="on" />
			<input type="button" value="bbb" />
			<input type="button" value="ccc" />
			<div style="display: block;`">111</div>
			<div>222</div>
			<div>333</div>
		</div>
	</body>
</html>

Dark Sky！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简易选项卡

简易选项卡<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{margin: 0; padding: 0;} #box{width: 220px; height: 220px; margin: 200px auto;} #box div{width: 200px; height: 2.
复制链接

扫一扫