刚在自己的前端技术群里有个小伙伴儿问到这个问题，点击的时候进行红色背景和白色背景的切换，然后我就临时想到了一个解决方法，在这里记录一下吧，希望还有别的刚学习前端的小伙伴儿能用到，大神就请绕道咯！另外提一下，自己这个前端群都是一群热爱前端的小伙伴儿，如果你是一个人在自学的话，不妨来加入我们，把你遇到的前端问题尽管扔进群里哦，小伙伴儿们看到了会给你耐心解答的哦!

群号前面是五八一零，后面是二五六一四，快来哦！

不说了，上代码：

 <!DOCTYPE html>

 <html>

 <head>

 <style>

   .box {

    width: 100px;

    height: 100px;

    margin: 0;

    background-color: red;

 }

 </style>

 </head>

 <body>

 <div class="box"></div>

 <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js">

 </script>

 <script>

 $(document).ready(function(){

   var colorArr = ['white','red'];

   var count = 0;

   $('.box').click(function() {

     var $this = $(this);

      $this.css('backgroundColor', colorArr[count%2]);

      count++;

   });

 });

 </script>

 </body>

 </html>

jquery点击切换背景色的更多相关文章

  1. jquery中点击切换的实现

    项目中经常会遇到一种情况,就是点击切换,比如点击按钮,div样式为1,再点击一下按钮,div样式为2,再点击一下按钮,div样式为1.需要自定义jQuery方法toggle. // toggle方法 ...

  2. jquery 点击切换div

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jquery点击切换在点击切换

    <div style=" position: absolute; top: 6rem; right: 4rem;" id="hides" > < ...

  4. jquery——左右按钮点击切换一组图片功能

    一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...

  5. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  6. jquery - 通过点击切换文字内容

    今天要写一个简单的显示/隐藏效果,本以为是挺简单的事儿,没想到还真因为基本功不扎实遇到了问题,这里跟大家分享一下. 百度了很多方法,精简能用的干货实在太少,最后还是通过去查jq的官方api才找到了解决 ...

  7. 基于jQuery左右滑动切换特效 附源码

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div ...

  8. 一款基于jQuery轮播切换焦点图,可播放多张图片

    今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...

  9. 一款基于jQuery多图切换焦点图插件

    这次要给大家分享的也是一款jQuery图片滑块插件,之前有介绍过不少实用的jQuery焦点图插件和jQuery图片滑块插件,比如jQuery左侧Tab切换的图片滑块插件.它的特点是可以同时切换多张图片 ...

随机推荐

  1. 【解决】Word 在试图打开文件时遇到错误 请尝试下列方法：* xxx * xxx * xxx

    有好几种情况,我先说我的这个情况 1.word设置不当导致 看图: 然后就能打开了~ 2.word格式问题,比如原来是doc,被人手动改成docx~~~ 解决方法:改回来 3.word版本不兼容,比如 ...

  2. Sql Server系列：数据类型转换函数

    T-SQL提供了两个显示转换的函数:CAST函数和CONVERT函数. 1. CAST函数 语法: CAST ( expression AS data_type [ ( length ) ] ) 示例 ...

  3. UGUI 之获取当前控件的高度

    当Canvas Scaler选择Constant Pixel Size 当前的分辨率会被被固定,可以用RectTransform类里面的.rect变量值获取 height或Width. 在次情况下获取 ...

  4. 【原创】开源Math.NET基础数学类库使用(09)相关数论函数使用

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  5. 【开源】OSharp3.3框架解说系列：开发计划与进度

    OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...

  6. Util应用程序框架公共操作类(十):可空值类型扩展

    当你使用可空的值类型时,你会发现取值很不方便,比如Guid? obj,你要从obj中获取值,可以使用Value属性obj. Value,但obj可能为null,这时候就会抛出一个异常. 可空值类型提供 ...

  7. 一个简易的MysQL性能查询脚本

    如下: #!/bin/sh mysqladmin -P3306 -uroot -p ext |\ awk -F"|" \ "BEGIN{ count=0; }" ...

  8. .net 将List序列化成Json字符串

    将List类型转化为Json,是我们平常开发时最常见的了.在使用中,有很多种方法,也可以使用. 第一种 第三方组件:Newtonsoft.Json.dll //转化成Json Newtonsoft.J ...

  9. ASP.NET MVC5中View-Controller间数据的传递

    使用ASP.NET MVC做开发时,经常需要在页面(View)和控制器(Controller)之间传递数据,那么都有哪些数据传递的方式呢? 本文对于View向Controller中传值共列举了以下几种 ...

  10. Moon.Orm版本维护及下载（跟踪报道）

    提示:最下面有最新的下载地址  历史记录: ).-- :: 支持Mysql,Sqlserver(点击下载) ).2013年9月14日,代码重构,加入oracle.复合主键功能(点击下载) )--,为d ...