jquery实现单击div切换背景，再次单击回到原来样式
【摘要】 大家好，我是雄雄，欢迎关注微信公众号，雄雄的小课堂。 前言今天分享一个很简单的样式，主要是给初学者提供的，高手飘走~我们经常会遇到这样的需求，鼠标悬浮某个模块，颜色变一次，离开又变回去。单击一次更改一下，再次单击，回归原位。今天我们就来看看，这歌案例是如何实现的。 代码实现首先我们可以先来看看效果图：1.这是默认的的div样式（四个div都是深绿色的）：2.然后当我们单击第一个div时的样式...
大家好，我是雄雄，欢迎关注微信公众号，雄雄的小课堂。
前言
今天分享一个很简单的样式，主要是给初学者提供的，高手飘走~
我们经常会遇到这样的需求，鼠标悬浮某个模块，颜色变一次，离开又变回去。单击一次更改一下，再次单击，回归原位。今天我们就来看看，这歌案例是如何实现的。
代码实现
首先我们可以先来看看效果图：
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来移除样式。
你学会了吗？
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）