选项卡

最新推荐文章于 2022-02-07 18:47:23 发布

喔喔牛在路上

最新推荐文章于 2022-02-07 18:47:23 发布

阅读量238

点赞数

分类专栏：代码片段

本文链接：https://blog.csdn.net/wowoniuzailushang/article/details/53369747

版权

代码片段专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.active{background: red;}
		</style>
	</head>
	<body>
		<div id="box1" style="width: 200px;height: 200px;border:1px solid black;">
			<input type="button" name="" id="" value="1" />
			<input type="button" name="" id="" value="2" />
			<input type="button" name="" id="" value="3" />
			<div>11111</div>
			<div style="display: none;">22222</div>
			<div style="display:none;">33333</div>
		</div>
	</body>
       <script>
               function c(obj){
			console.log(obj);
		}
		var parentElement = document.getElementById("box1");
		var child1 = parentElement.getElementsByTagName("input");
		var child2 = parentElement.getElementsByTagName("div");
		for(var i = 0;i < child1.length;i++){
			child1[i].index = i;
			child1[i].onclick = function(){					
				for(var j = 0;j < child1.length;j++){
					child1[j].className = "";
					child2[j].style.display = 'none';
				}
				this.className = 'active';
				child2[this.index].style.display = 'block';
			}
		}
         </script>
</html>

喔喔牛在路上

关注

0
点赞
踩
1

收藏

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

.active{background: red;} 11111 22222 33333 function c(obj){ console.log(obj); } var parentElement = document.getElementById("box1");
复制链接

扫一扫