jQuery点击按钮时会变红

最新推荐文章于 2023-02-15 14:59:22 发布

@山海*

最新推荐文章于 2023-02-15 14:59:22 发布

阅读量698

点赞数 1

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_47612165/article/details/109585514

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			.red{
				background-color:red;
			}
			.box{
				display:none;
			}
			.block{
				display:block;
			}
			
		</style>
	</head>
	<body>
		<div id="hot">
			<button class="btn">按钮1</button>
			<button class="btn">按钮2</button>
			<button class="btn">按钮3</button>
		</div>
		<div id="bot">
			<div class="box block">冬日光临，才发觉又过了一个秋季</div>
			<div class="box">冬日光临，才发觉又过了你一个秋季</div>
			<div class="box">冬日光临，才发觉又过了你一个秋季</div>
		</div>
		<script src="jquery.min.js"></script>
		<script >
			$(".btn").click(function(){
				$(this).addClass("red").siblings().removeClass("red");
				var index=$(this).index();
				consloe.log(index);
				$(".box").eq(index).addClass("block");
				$(".box").eq(index).siblings().removeClass("block");
			})
		</script>
	</body>
</html>

在这里插入图片描述

@山海*

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jQuery点击按钮时会变红

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> .red{ background-color:red; } .box{
复制链接

扫一扫