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

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

不说了，上代码：

 <!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. 在Package中处理 bit column

    SQL Server没有boolean类型,使用bit 类型来代替,bit类型有两个值:0 和 1. SSIS package中有boolean类型,SSIS自动将bit 类型转换成boolean类型 ...

  2. Centos 源码安装zabbix 2.4.5

    Zabbix简介 Zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案.zabbix能监视各种网络参数,保证服务器系统 的安全运营:并提供柔软的通知机制以让系统管 ...

  3. OpenCASCADE Conic to BSpline Curves-Parabola

    OpenCASCADE Conic to BSpline Curves-Parabola eryar@163.com Abstract. Rational Bezier Curve can repre ...

  4. Android获取短信验证码

    Android开发中关于短息验证码的设计层出不穷,越来越多的应用为了更好的提高软件的安全性,开始使用通过服务器向用户发送验证码的方式,来保护用户个人信息的安全性.无论是用户注册时的信息验证还是当用户发 ...

  5. 升级到Windows10

    1.Windows10的优点 2.需要安装的软件 实用软件: Firefox浏览器 Chrome浏览器 有道云笔记 Adobe Reader Adobe Flash Adobe PhotoShop 编 ...

  6. PHP关于web页面交互内容

    学php学了有一段时间了总结总结给大家分享一下 PHP中的引用 第一段程序: <?php $first_name="firstName"; $first=&$firs ...

  7. 修改ibdata1大小的验证以及如何使用mysqld_multi管理多实例

    修改ibdata1大小的验证 ibdata是共享表空间,在MySQL初始化的时候就生成了. 但很多童鞋会看到网上各种大神的调优建议,在MySQL已经初始化的情况下,修改配置文件中innodb_data ...

  8. 初试Code First（附Demo）

    写在前面 新建项目 安装EntityFramework程序包 创建模型 创建上下文DbContext 创建数据库.读/写数据 配置连接字符串 Code First 迁移 示例Demo下载 后记 以前逛 ...

  9. js 对Array的补充

    Array.form的用法 1.可以将各种值转为真正的数组,并且还提供map功能.这实际上意味着,只要有一个原始的数据结构,你就可以先对它的值进行处理,然后转成规范的数组结构,进而就可以使用数量众多的 ...

  10. Hibernate之HQL查询的一些例子

    Hibernate配备了一种非常强大的查询语言,就是HQL(hibernate query language),HQL看上去很像sql,但只是语法结构上相似,HQL是一种面向对象的查询,他可以理解继承 ...