开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情
大家好，我是雄雄，欢迎关注微信公众号，雄雄的小课堂。
前言
今天分享一个很简单的样式，主要是给初学者提供的，高手飘走~ 我们经常会遇到这样的需求，鼠标悬浮某个模块，颜色变一次，离开又变回去。单击一次更改一下，再次单击，回归原位。今天我们就来看看，这歌案例是如何实现的。
代码实现
首先我们可以先来看看效果图：
1.这是默认的的div样式（四个div都是深绿色的）：
2.然后当我们单击第一个div时的样式，我们会发现该div的背景变成了白色，边框变成了红色：
3.当我们再次单击第一个div时的样式（div样式复归原来的绿色背景）：
如果你需要的效果是这样的，那么请您继续往下面看，如果不是，您也可以看看实现方法。
5.首先我们需要一个jQuery环境jquery-1.8.3.js，这个文件网上一搜一大堆，可以自行准备。将该文件放置到项目下面的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>
我们写了四个div,样式都是div_1，然后通过toggle实践的addClass方法添加样式，通过removeClass来移除样式。
你学会了吗？
