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(‘原来的文字’);

});

时间: 2024-10-22 07:05:10

jquery效果,多个div,点击任何一个div,那么这个div会切换文字,变换背景颜色,再次点击其他的div ,这个div会发生刚才的变化,之前点击的div的颜色会变回来的相关文章

通过this获取当前点击选项相关数据

很多时候jquery只能或者应该回去一个集合.然后通过this获取触发时间的对象及相关属性 this.jq('#needsType').on("click", ".selection", function (e) { e.stopPropagation(); //获取父级元素,使得隐藏的ul在添加on方法后显示出来 var that = $(this).parent(); console.log(that); that.addClass('on'); that.fi

点击GridView中TextBox弹出输入对话层,输入内容反传回先前点击的TextBox中(Jquery获取GridView中TextBox的ID)

项目中,由于用户反映说:GridView表中的输入框太小,不方便输入,特别是在输入内容多的时候.问能不能点击GridView中输入框的时候能弹出一个大的内容输入对话框. 介于用户的要求,我就开始修改. 先想到的就是我用Jquery在GridView中TextBox上添加一个focus焦点捕捉事件,当点击时触犯弹出内容输入框. 然后就是当输入完毕的操作了,我又使用内容输入框(其实也是一个TextBox)的焦点失去事件(blur),在该事件中先把值反馈回先前点击的GridView中的那个TextBo

jQuery选取点击元素获得当前点击元素信息

目前几种借用jQuery选取点击元素获得当前点击元素信息, $(document).click(function(e) { // 在页面任意位置点击而触发此事件 $(e.target).attr("id"); // e.target表示被点击的目标 })//此方法对于想要获取击元素获得当前点击元素信息如id,value,等信息,无法准确定位,获取,因此需要this,及当前之意 借用this获取当前元素信息 HTML代码 <ul> <li class="a&q

vue中怎么实现获取当前点击对象this

应用场景 在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示2行超出显示点击查看更多,,要点击查看更多对当前的这条评论进行全部评论展示! 问题描述 要是在传统的点击事件中,我们可以获取当前点击事件的this来执行相应的操作,但是在vue中没有这个点击this事件! 解决问题 在vue中我们要通过组件的方式来实现对当前元素进去切换 父组件 <v-content :cont="item.content"></v-content> 子组

vue项目实现渲染列表获取当前点击项(高亮)

一个简单的例子: 这是渲染列表的代码 在data里设置一个初始值0, <div v-for="(item, index) in tochildren" :key="index" @click="currentIndex=index" :class="{style1:index==currentIndex}">{{item}}</div> 也是实现需求的核心  主要是绑定属性样式是否为true,通过cli

【笔记】js获取当前点击元素的索引

以前用jq 做过图片切换 滑动之类的特效现在想用js 试试是怎么一回事 jq图片切换的思路是用index()函数获取当前点击的按钮的索引然后根据索引值将对应索引的图片显示出来 于是查了一下js 是如何获取index的如下: js代码 var ul = document.getElementById("list"); var ul_child = ul.getElementsByTagName('li'); for (var i = 0; i < ul_child.length;

jq获取当前点击的li是ul中的第几个?

<script> var navulsize = $('.navul li').size();            var navulwidth = $('.navul li').width();            var allwidth = navulwidth*navulsize;            $('.navul').width(allwidth);            $('.navul li').click(function(){                va

Android 点击ListView(或GridView)的一个item,使其里面textview变色,点击另一个这个恢复原来颜色

今天作一个项目,就是做视频app,如果电视剧的话有许多剧集,点击一个item,播放不同的剧集,要有点击效果,并且默认是选择第一个.花费了一段时间,自己觉得有点难 度,现在和大家分享一下,下面是效果显示: 这个类是例子主类: <span style="font-size:14px;">public final class MainActivity extends Activity { private GridView gridView; private ArrayList&l

JQuery: JQuery效果(隐藏、显示、切换,滑动,淡入淡出,以及动画)

JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() 淡入淡出:JQuery fadeIn().JQuery fadeOut().JQuery fadeToggle().JQuery fadeTo() 滑动:JQuery slideDown().JQuery slideUP().JQuery slideToggle() 动画:JQuery animat