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