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