首先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. [帖子收集]环境光遮蔽(Ambient Occlusion)

    环境光遮蔽,效果示例图 图片左边是一条龙的简单模型,呈现在一个均匀照明的环境中.尽管模型中有一些明暗不同的区域,但大部分光照都是均匀的.虽然模型有着相当复杂的几何形状,但看上去比较光滑平坦,没有明显的 ...

  2. SnackbarUtils:一行代码搞定Snackbar

    此文章是我在简书的文章 http://www.jianshu.com/p/f4ba05d7bbda Snackbar在Android中的使用日益广泛,很大程度上替代了传统的Toast,相比Toast拥 ...

  3. python 在mongo 中建立索引

    import pymongo mongo = pymongo.Connection('localhost') collection = mongo['database']['user'] collec ...

  4. shell中$(( )) 与 $( ) 还有${ }的区别

    http://blog.chinaunix.net/uid-14351756-id-2820651.html $( ) 与 ` ` (反引号)在 bash shell 中,$( ) 与 ` ` (反引 ...

  5. HTML下直接调用Less文件

    虽然有很多编译Less的插件可以使用 , 但是在开发的时候 , 每修改一次less代码就编译一次less文件 , 很明显效率就太低了 , 接下来为大家介绍一个直接在html的link标签中引入.les ...

  6. CodeForces 700A As Fast As Possible

    要保证总时间最短,因为总时间计的是最后一个人到达的时间,也就是最后一个人要求尽快到达,也就是说我们要让最后一个人乘车时间尽量多.再仔细想想可以发现每个人的乘车时间和走路时间都是一样的. 因此,可以二分 ...

  7. Python建立SSH连接与使用方法

    paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接 安装过程也比较简单,先安装pycrypto后安装paramiko,解压后在命令提示符下 ...

  8. Sass与Compress实战:第一章

    1.消除冗余代码的方式: ▶通过变量来复用属性值 例如,一段冗余的CSS代码: h1#brand { color : #1875e7 } #sidebar { background-color : # ...

  9. 【Python@Thread】Semaphore&糖果机

    信号量适用与多线程竞争有限资源的情况. from atexit import register from time import ctime, sleep from threading import ...

  10. c# 方法重载

    在c#中同样的方法名称不一样的参数数量和类型可以实现方法重载 class ResultDisplayer{void DisplayResult(string result){// implementa ...