jq 点击切换选项

最新推荐文章于 2021-09-10 11:10:08 发布

陈二先生

最新推荐文章于 2021-09-10 11:10:08 发布

阅读量765

点赞数 1

分类专栏： jq 效果

本文链接：https://blog.csdn.net/a2416743126/article/details/79404519

版权

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8"/>
		<script src="jquery-3.2.1.min.js"></script>
		<style>
			.index{background:#000;}
			.w400{width:400px;}
			.optionDL-4>div{float:left;border:1px solid #000;color:#999;padding:2px 10px;margin:8px 10px;}
			.optionDL-4>.index{color:#fff;background:#000;box-shadow:5px 5px 5px #444;}
			.optionDL-4>div:hover{color:#fff;background:#000;box-shadow:5px 5px 5px #444;}
		</style>
	</head>
	<body>
		<div class="optionDL-4 w400">
			<div class="index">一</div>
			<div>二</div>
			<div>三</div>
		</div>
	</body>
</html>
<script>
	$('.optionDL-4').children().click(function(){
		$(this).parent().children('.index').removeClass('index');
		$(this).addClass('index');
	});

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

陈二先生

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jq 点击切换选项

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="utf-8"/&gt; &lt;script src="jquery-3.2.1.min.js"&gt;&lt;/script&gt; &
复制链接

扫一扫