jquery实现单击div切换背景,再次单击回到原来样式

简介: jquery实现单击div切换背景,再次单击回到原来样式

首先来看看效果图:


1.这是默认的的div样式:

2018110615081592.png

2.当我们单击第一个div时的样式:

20181106150842954.png


3.当我们再次单击第一个div时的样式:

20181106150909435.png

如果你需要的效果是这样的,那么请您继续往下面看,如果不是,您也可以看看实现方法。


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>


目录
相关文章
|
3月前
|
JavaScript 前端开发
JavaScript jQuery修改样式
JavaScript jQuery修改样式
|
3月前
|
JavaScript
jQuery方式追加div覆盖
jQuery方式追加div覆盖
|
4月前
|
JavaScript 前端开发 索引
Javascript知识【jQuery样式操作&案例:jQuery隔行换色】
Javascript知识【jQuery样式操作&案例:jQuery隔行换色】
|
3月前
|
JavaScript
jquery实现下拉框选中对应的div
jquery实现下拉框选中对应的div
27 0
|
3月前
|
JavaScript
jQuery清空div内容
jQuery清空div内容
|
1月前
|
JavaScript
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
20 0
|
1月前
|
JavaScript 前端开发
原生js与jQuery显示隐藏div的几种方法
原生js与jQuery显示隐藏div的几种方法
26 0
|
3月前
|
JavaScript
jquery点击删除按钮,删除当前的div
jquery点击删除按钮,删除当前的div
24 0
|
3月前
|
JavaScript 定位技术
jQuery实现点击图标div循环放大缩小功能
jQuery实现点击图标div循环放大缩小功能
23 0
|
4月前
|
前端开发 JavaScript
前端基础 -JQuery之 对样式的操作
前端基础 -JQuery之 对样式的操作
20 1

相关产品

  • 云迁移中心
  • 相关课程

    更多