jquery效果,多个div,点击任何一个div,那么这个div会切换文字,变换背景颜色,再次点击其他的div ,这个div会发生刚才的变化,之前点击的div的颜色会变回来
首先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的颜色会变回来的更多相关文章
- jquery - 通过点击切换文字内容
今天要写一个简单的显示/隐藏效果,本以为是挺简单的事儿,没想到还真因为基本功不扎实遇到了问题,这里跟大家分享一下. 百度了很多方法,精简能用的干货实在太少,最后还是通过去查jq的官方api才找到了解决 ...
- ie8下jquery读取当前点击的标签位置错误,原因是里面有内容写了text-indent:-9999px
今天写一地图的效果,鼠标点击对应的区域,弹出所点击区域的名字. 因为设计的区域名字有特殊效果,所以,在点击区域里面套了个标签写上区域名字用来识别,但是这个文字呢不同显示在页面上,所以就给 em 加个了 ...
- 通过this获取当前点击选项相关数据
很多时候jquery只能或者应该回去一个集合.然后通过this获取触发时间的对象及相关属性 this.jq('#needsType').on("click", ".sel ...
- vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字
点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...
- vue中怎么实现获取当前点击对象this
应用场景 在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示2行超出显示点击查看更多,,要点击查看更多对当前的这条评论进行全部评论展示! 问题描述 要是在传统的点击事件 ...
- 【笔记】js获取当前点击元素的索引
以前用jq 做过图片切换 滑动之类的特效现在想用js 试试是怎么一回事 jq图片切换的思路是用index()函数获取当前点击的按钮的索引然后根据索引值将对应索引的图片显示出来 于是查了一下js 是如何 ...
- jq获取当前点击的li是ul中的第几个?
<script> var navulsize = $('.navul li').size(); var navulwidth = $('.navul li').wid ...
- jquery中获取当前点击对象
jquery中获取当前点击对象的简单方法就是,在点击事件click中传入event对象 click(function(event)); 调用当前对象就是$(event.target);
- 怎么给当前点击的a标签添加一个样式(跳转页面后)
怎么给当前点击的a标签添加一个样式(跳转页面后): 方法1. 用cookie记录这个打开的序列号,然后页面在跳转的时候在读出来.方法2. 循环a的链接,然后与location.href去比对,如果相同 ...
随机推荐
- WinForm 进程和线程
进程: //进程用到的类Process,需要进行解析 using System.Diagnostics Process.Start("calc");//Process是非静态方法, ...
- easyui datagrid分页
datagrid分页设置 pagination="true" 貌似是不行的! 只是显示分页工具栏 没有达到分页效果 前端 $(function (){ var p = $('#d ...
- Java定时任务器
java定时任务,每天定时执行任务.以下是这个例子的全部代码. public class TimerManager { //时间间隔 private static final long PERIOD_ ...
- spring HttpServletRequest 简介
前提:工作遇到controller中通过注解的方式注入 @Resourceprivate HttpServletRequest request;我们都知道spring 默认是单例,当遇到并发的时候线程 ...
- LeetCode 395. Longest Substring with At Least K Repeating Characters C#
Find the length of the longest substring T of a given string (consists of lowercase letters only) su ...
- 转:jquery的live和on
参考1,参考2 给元素绑定事件,本人用的jquery版本大多为1.7和1.8的,所以一直习惯于用live(),但是最近朋友突然问我,怎么给新生成的dom元素绑定事件,我随口回答live(),结果他给我 ...
- Java实现二叉树先序,中序,后序遍历
以下是我要解析的一个二叉树的模型形状 接下来废话不多直接上代码 一种是用递归的方法,另一种是用堆栈的方法: 首先创建一棵树: public class Node { private int data; ...
- 配置Windows为NTP服务器
建议使用 ntpd for windows,这是一个ntp的windows版,操作和linux相似 下载:https://www.meinbergglobal.com/english/sw/ntp.h ...
- 安装CocoaPods流程及常见问题(Xcode->homebrew->RVM->Ruby->CocoaPods)
一.HomeBrew 1.(转)HomeBrew的安装和简单使用 http://blog.csdn.net/maojudong/article/details/7918291 2.homebrew的简 ...
- String类之substring--->查找某位置对应的字
以下方法都是java内置类String类的内置方法(不是构造方法哦,就是普通的方法),不需要我们写,直接拿过来用即可. substring方法对应Api介绍 查找字符串中的 从int beginI ...