首先css样式:

/*原来的背景色*/

.bg {

background:'red'

}

/*需要切换的背景色*/

.bg_click {

background:'green'

}

JS:

$('div').on('click',function(){

var $div = $(this);

var $others = $div.siblings();

if($div.hasClass('bg')){

$div.removeClass('bg').addClass('bg_click').html('你要改变的文字’);

}else {

$div.removeClass('bg_click').addClass('bg').html(‘原来的文字’);

}

$others.addClass('bg').removeClass('bg_click').html('原来的文字’);

});

jquery效果,多个div,点击任何一个div,那么这个div会切换文字,变换背景颜色,再次点击其他的div ,这个div会发生刚才的变化,之前点击的div的颜色会变回来的更多相关文章

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

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

  2. ie8下jquery读取当前点击的标签位置错误,原因是里面有内容写了text-indent:-9999px

    今天写一地图的效果,鼠标点击对应的区域,弹出所点击区域的名字. 因为设计的区域名字有特殊效果,所以,在点击区域里面套了个标签写上区域名字用来识别,但是这个文字呢不同显示在页面上,所以就给 em 加个了 ...

  3. 通过this获取当前点击选项相关数据

    很多时候jquery只能或者应该回去一个集合.然后通过this获取触发时间的对象及相关属性 this.jq('#needsType').on("click", ".sel ...

  4. vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字

    点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...

  5. vue中怎么实现获取当前点击对象this

    应用场景 在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示2行超出显示点击查看更多,,要点击查看更多对当前的这条评论进行全部评论展示! 问题描述 要是在传统的点击事件 ...

  6. 【笔记】js获取当前点击元素的索引

    以前用jq 做过图片切换 滑动之类的特效现在想用js 试试是怎么一回事 jq图片切换的思路是用index()函数获取当前点击的按钮的索引然后根据索引值将对应索引的图片显示出来 于是查了一下js 是如何 ...

  7. jq获取当前点击的li是ul中的第几个?

    <script> var navulsize = $('.navul li').size();            var navulwidth = $('.navul li').wid ...

  8. jquery中获取当前点击对象

    jquery中获取当前点击对象的简单方法就是,在点击事件click中传入event对象 click(function(event)); 调用当前对象就是$(event.target);

  9. 怎么给当前点击的a标签添加一个样式(跳转页面后)

    怎么给当前点击的a标签添加一个样式(跳转页面后): 方法1. 用cookie记录这个打开的序列号,然后页面在跳转的时候在读出来.方法2. 循环a的链接,然后与location.href去比对,如果相同 ...

随机推荐

  1. Ansible Lookup

    1.  文件内容的读取 --- - hosts: all vars: contents: "{{ lookup('file', '/etc/foo.txt') }}" tasks: ...

  2. 防范CSRF(一)

    CSRF是跨网站伪造请求的缩写.大致的攻击流程是,黑客获得浏览器向服务器发送的请求,然后对请求进行修改,让服务器执行指定的操作. 防范方式可以使用微软提供的解决方案. View放置Html.AntiF ...

  3. 判断iPhone设备是carplay和iPod的方法

    Carplay 参考代码: int UdevIsCarplay(int nVid, int nPid)//int UsbModeSwitch(pUdevStatus pStatus) { ; if ( ...

  4. python 学习 设计模式(goF设计模式)

    一 单例模式 用来创建单个实例 #/usr/bin/env python3 # -*- coding:utf-8 -*- # Author: ZSHAOX class Foo: instance = ...

  5. xcode6+ios8 横屏下启动画面不显示问题修改

    本文转载自汉果博客 » xcode6+ios8 横屏下启动画面不显示问题修改 最近我做游戏 发现xcode6+ios8 横屏下启动画面不显示   显示黑屏 . 设置横屏后 设置catalog 添加使用 ...

  6. android 知识点

    版本更新 数据库Relam 图片加载库 视频bilibili 幻灯片 网络请求框架 内存检测工具 内存优化总结 压缩包下载并且解压 新闻资讯导航 联系人 滑动退出activity mvp框架 加载进度 ...

  7. win7远程连接ubuntu14.04.1桌面

    sudo apt-get install xdrp sudo apt-get install vnc4server tightserver sudo apt-get install xfce4 ech ...

  8. handler消息机制

    MessageQueue代码:http://grepcode.com/file_/repository.grepcode.com/java/ext/com.google.android/android ...

  9. Paint on a Wall

    Paint on a Wall 题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=4012 搜索+状态压缩 这题刚开始以为是dp(之前写过墙是一 ...

  10. Jquery结合datagrid框架

    <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8 ...