【yoyo】点击切换图片

最新推荐文章于 2022-11-29 09:02:57 发布

嗨帅

最新推荐文章于 2022-11-29 09:02:57 发布

阅读量304

点赞数 1

分类专栏： javascript 文章标签： javaScript 点击切换图片

本文链接：https://blog.csdn.net/wuxinren1990/article/details/77698495

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

点击对应按钮显示对应图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.btn{
			width: 100px;	
			color: red;
			font-size: 20px;
			background-color: yellow;
			display: inline-block;
			text-align: center;


		}
		.showDiv{
			width: 400px;
			height: 200px;
			background-color: cyan;
			color: red;
			font-size: 30px;
			text-align: center;

		}
		.hidden{
			display: none;
		}
	</style>
	</head>
<body>
<div>
	<span class="btn">1</span>
	<span class="btn">2</span>
	<span class="btn">3</span>
	<span class="btn">4</span>
</div>
<div class="showDiv">第一块</div>
<div class="showDiv hidden">第二块</div>
<div class="showDiv hidden">第三块</div>
<div class="showDiv hidden">第四块</div>
</body>
<script type="text/javascript">
	 var btn=document.getElementsByClassName('btn');
	 var showDiv=document.getElementsByClassName('showDiv');


	 for( var i=0;i<btn.length;i++){
	 	(function(a){
	 		btn[i].οnclick=function(){
	 		//让所有btn背景颜色初始化为黄色
	 		for(var j= 0 ; j < btn.length ; j++){
	 			btn[j].style.backgroundColor = "yellow";
	 			showDiv[j].style.display="none";
	 		
	 		}//this指向的是触发事件的元素 
	 		this.style.backgroundColor="gray";
	 		showDiv[a].style.display="block";

	 	}
	 })(i);
	}
</script>
</html>
效果展示

嗨帅

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【yoyo】点击切换图片

点击对应按钮显示对应图片 .btn{ width: 100px; color: red; font-size: 20px; background-color: yellow; display: inline-block; text-align: center; } .showDiv{ width: 400px; he
复制链接

扫一扫

专栏目录