jquery实现单击div切换背景，再次单击回到原来样式

最新推荐文章于 2022-04-22 19:03:41 发布

穆雄雄

最新推荐文章于 2022-04-22 19:03:41 发布

阅读量7.2k

点赞数 1

分类专栏： # JavaScript 文章标签： jQuery 单击div切换样式 div背景色切换

本文链接：https://blog.csdn.net/qq_34137397/article/details/83787727

版权

JavaScript 专栏收录该内容

57 篇文章 4 订阅

订阅专栏

首先来看看效果图：
1.这是默认的的div样式：
在这里插入图片描述
2.当我们单击第一个div时的样式：

3.当我们再次单击第一个div时的样式：

如果你需要的效果是这样的，那么请您继续往下面看，如果不是，您也可以看看实现方法。
5.首先我们需要一个jQuery环境jquery-1.8.3.js，这个文件网上一搜一大堆，可以自行准备。将该文件放置到项目下面的js目录下面。
6.然后下面是源代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function(){
				$(".div_1").toggle(function(){
					$(this).addClass("style_div");
				},function(){
					$(this).removeClass("style_div");
				});
			});
		</script>
		<style type="text/css">
			.div_1 {
				width: 100px;
				height: 50px;
				background: darkolivegreen;
				margin: 10px;
			}
			.div_1:hover{
				cursor: pointer;
			}
			.style_div{
				border: 1px solid red;
				background: white;
			}
		</style>
	</head>

	<body>
		<div id="main">
			<div class="div_1">

			</div>
			<div class="div_1">

			</div>
			<div class="div_1">

			</div>
			<div class="div_1">

			</div>
		</div>
	</body>

</html>

欢迎关注本人微信公众号“梦翔资源汇”，会有意想不到的收获哦~~~

穆雄雄

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery实现单击div切换背景，再次单击回到原来样式

首先来看看效果图：1.这是默认的的div样式：2.当我们单击第一个div时的样式：3.当我们再次单击第一个div时的样式：如果你需要的效果是这样的，那么请您继续往下面看，如果不是，您也可以看看实现方法。5.首先我们需要一个jQuery环境jquery-1.8.3.js，这个文件网上一搜一大堆，可以自行准备。将该文件放置到项目下面的js目录下面。6.然后下面是源代码：&lt;!D...
复制链接

扫一扫