首先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. 显示hibernate的sql语句

    <property name="show_sql">true</property> <property name="format_sql&q ...

  2. 获取listview当前滚动的高度

    public int getScrollY() {      View c = mListView.getChildAt(0);      if (c == null ) {          ret ...

  3. ubuntu jdk环境变量配置

    export JAVA_HOME=/usr/local/java/jdk1.8.0_25  export JRE_HOME=${JAVA_HOME}/jre  export CLASSPATH=.:$ ...

  4. 32bit程序在64bit操作系统下处理重定向细节(转自http://bbs.pediy.com/showthread.php?t=89054)

    1. 64bit操作系统的重定向机制以及目的 在64bit操作系统中,为了无缝兼容32bit程序的运行,64bit的Windows操作系统采用重定向机制.目的是为了能让32bit程序在64bit的操作 ...

  5. 为Array 添加indexOf

    为array赋予属性 if (!Array.prototype.indexOf) { Array.prototype.indexOf = function (elt /*, from*/) { var ...

  6. java 移位运算

    移位运算 :将整数转化为二进制(以补码的形式),按位平移. <<     左移 >>     右移 >>>   无符号右移 << 右移: 按位做平 ...

  7. 为什么new的普通数组用delete 和 delete[]都能正确释放

    由同事推荐的一篇博客: 为何new出的对象数组必须要用delete[]删除,而普通数组delete和delete[]都一样-------_CrtMemBlockHeader 文章解释了delete 内 ...

  8. 一个博客总结的css常见的兼容性问题

    http://www.cnblogs.com/jikey/p/4233003.html

  9. SBT详解

    文章转载自http://beike.iteye.com/blog/1575296 SBT = (not so) Simple Build Tool,是scala的构建工具,与java的maven地位相 ...

  10. MongoDB索引(一)

    原文地址 一.介绍 我们已经很清楚索引会提高查询效率.如果没有索引,MongoDB必须对全部集合进行扫描,即,扫描集合中每条文档以选择那些符合查询条件的文档.对查询来说如果存在合适的索引,则Mongo ...