首先来看看效果图：
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>
欢迎关注本人微信公众号“梦翔资源汇”，会有意想不到的收获哦~~~