首先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. 用DriverBackUp备份了文件 装好系统后怎么把备份的驱动文件还原

    1.打开DriverBackUp 2.菜单栏选择Restore 3.选择open backup file 4.找到备份文件位置,并选择.bki后缀的文件 5.点击"打开" 6.勾选 ...

  2. 项目有叉号, 但是没有代码错误的时候, 是JDK版本的问题

    windows---proferences---java--compiler进入项目--properties---java Compiler进入项目--properties---Myeclipse-- ...

  3. mycat 概述

    从开始接触mycat,到现在为止也有三个多月的时间了,目前在测试环境中已经初步应用!大概可以总结一下了 mycat是一个数据库中间件,也可以理解为是数据库代理.在架构体系中是位于数据库和应用层之间的一 ...

  4. Python----文件的IO操作

    一.文件操作 r 以只读方式打开文件.文件的指针将会放在文件的开头.这是默认模式. rb 以二进制格式打开一个文件用于只读.文件指针将会放在文件的开头.这是默认模式. r+ 打开一个文件用于读写.文件 ...

  5. Python 修炼3

    # 列表 功能方法 *补充(zip zip(list1,list2) 会形成一个[(),()]新的列表list1和list2一一对应得组成一个新的元素以元组最为单位) # 1.修改# li = [1, ...

  6. 使用MegaCli工具,在线调整raid配置

    公司hadoop平台采购了一批浪潮服务器,2个系统盘,12个数据盘.先想的用直通的raid卡免得再做单盘raid0麻烦,结果这批机器配的卡也不支持裸盘使用,咨询浪潮客服,说可以使用JBOD的模式进行, ...

  7. module parameters

    Parameter values can be assigned at load time by insmod or modprobe(this can read parameter from con ...

  8. FZU 2195 检查站点

    求出根节点到每个叶子节点的距离,找到最大的.然后总权值减去最大叶子距离就是答案. GNU C++ AC Visual C++  TLE #include<stdio.h> #include ...

  9. linux截取字符串的多种方法

    Linux 的字符串截取很有用.有八种方法. 假设有变量 var=http://www.hao.com/123.htm . . 一 # 号截取,删除左边字符,保留右边字符. echo ${var#*/ ...

  10. 小程序--改变子级别页面导航栏信息 / navigationBarTitleText

    微信小程序在公共文件app.json中设置了导航栏相关样式如下: 其中  navigationBarTitleText 为设置导航栏名称,若是想子级页面和父页面的header页面不同,则在子级文件中新 ...