标签之间的切换（适用于图片，类似于开关效果）

最新推荐文章于 2022-07-06 17:05:48 发布

lrp9090

最新推荐文章于 2022-07-06 17:05:48 发布

阅读量449

点赞数

文章标签：隐藏与显示 js 开关效果前端

本文链接：https://blog.csdn.net/lrp9090/article/details/82888040

版权

效果展示

在这里插入图片描述
点击后：

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<style>
	.change {
	overflow: hidden;
	}
	.change div {
	float: left;
	border:1px solid #e3e3e3;
	}
	.change span {
	display: block;
	height: 50px;
	width: 100px;
	text-align: center;
	line-height: 50px;
	color:#e8e8e8;
	}
	/* 圆角边框 */
	.div1,.div12 {
	border-radius: 30px 0 0 30px;
	}
	.div22,.div2 {
	border-radius: 0 30px 30px 0;
	}
	
	.div1{
	background-color: blue;
	}
	.div12{
	background-color: #fff;
	}
	.div22{
	background-color: blue;
	}
	.div2{
	background-color: #fff
	}
	
	</style>
	</head>
	<body>
	<div class="change">
	    		<div class="div1"><span>是</span></div>
	    		<div class="div12" style="display: none;"><span>否</span></div>
	    		<div class="div2"><span>否</span></div>
		<div class="div22" style="display: none;"><span>是</span></div>
	    		
	    	</div>
	
	</body>
	<script>
	$(".change div").each(function() {
	$(this).click(function() {
		$(this).siblings('div').toggle();
		$(this).toggle();
	});
	});
	</script>
	</html>

lrp9090

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
标签之间的切换（适用于图片，类似于开关效果）

效果展示点击后： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;&lt;/t
复制链接

扫一扫