首先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. python socket服务器进行远程升级

    # coding:utf-8from socket import *import binascii, linecache, time ServerUrl = "127.0.0.1:900&q ...

  2. Log4J1升级Log4J2

    近期,碰到需要将项目中的Log4J1升级到Log4J2,现进行下总结.交代下技术背景:web项目,基于Java + Maven 1. 依赖 <dependency> <groupId ...

  3. fbset视频参数说明

    在机器上输入:fbset mode "1280x720-55"  # D: 67.504 MHz, H: 40.961 kHz, V: 54.907 Hz geometry 128 ...

  4. Linux下区分物理CPU、逻辑CPU和CPU核数

    ㈠ 概念           ① 物理CPU                             实际Server中插槽上的CPU个数              物理cpu数量,可以数不重复的 p ...

  5. 客户端socket调用

    import java.net.Socket; import java.io.*; import java.util.Scanner; import java.util.regex.Pattern; ...

  6. open()的模块

    对文件操作流程: 1.打开文件,得到文件句柄并赋值给一个变量 2.通过句柄对文件进行操作 3.关闭文件 mode can be: *  'r' 只读. * 'w' 写入,如果之前有就覆盖 * 'a' ...

  7. APP性能测试工具

    各种自动化工具作用: 自动化:appium 针对接口做压测:jmeter 执行一段脚本,随机乱点:monkey 如果有用loadrunner12的话 也可以用mobilerecoder录制脚本(lr1 ...

  8. if和switch的原理

    在C语言中,if和switch是条件分支的重要组成部分.if的功能是计算判断条件的值,根据返回的值的不同来决定跳转到哪个部分.值为真则跳转到if语句块中,否则跳过if语句块.下面来分析一个简单的if实 ...

  9. A. Alyona and Numbers(CF ROUND 358 DIV2)

    A. Alyona and Numbers time limit per test 1 second memory limit per test 256 megabytes input standar ...

  10. Latex问题收集

    1. Latex中的空格 两个quad空格 a \qquad b 两个m的宽度 quad空格 a \quad b 一个m的宽度 大空格 a\ b 1/3m宽度 中等空格 a\;b 2/7m宽度 小空格 ...