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

首先来看看效果图：
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 {
				 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>

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