点击元素或div切换该元素的背景图

最新推荐文章于 2024-04-11 05:37:43 发布

原创最新推荐文章于 2024-04-11 05:37:43 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #图片

js 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种通过点击容器来切换其背景图片的方法。利用jQuery实现背景图的切换效果，适用于网页开发中需要改变元素背景的情况。

我们经常需要点击一个容器，改变该容器的背景图。达到这样的效果，我们有很多方法，我在此也总结一个方法，供自己和大家参考。具体如下

$(".ccc").addClass('choseicon'); // 初始化时添加背景1
		    $(".ccc").click(function() {
		        $(this).toggleClass('choseicon').toggleClass('choseicon1');
		        
		    })

.ccc是容器的背景，其他的相信大家一眼就看明白了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

青山拂晓

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

js实现点击切换checkbox背景图片的简单实例

10-19

在文档加载完成后，使用jQuery的`.ready()`方法设置一个点击事件处理函数，当用户点击带有`.check`类的元素时，根据当前的状态切换背景图片。这里的状态通过一个变量`flag`来保存，通过检查这个变量的值来决定背景...

jQuery点击切换背景图片代码

06-01

首先，我们需要在HTML页面中设置一个触发点击事件的元素，例如一个按钮或一个链接，以及一个作为背景的图片元素。HTML结构可能如下： ```html <!DOCTYPE html> <title>jQuery点击切换背景图片 #background-...

1 条评论您还未登录，请先登录后发表或查看评论

1 条评论

泪湿眼眸 2021.12.18
给解释一下啊

DIV动态/动画切换效果

泡泡菌的博客

09-26

4322

html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script src="../common/jquery-3.1.1.js" type="text/javascript">script> style> .box{position: relative}

为元素添加点击切换事件

qq_43029797的博客

03-01

702

1、 var btn = document.querySelector('#btn'); var falg = true; btn.addEventListener('click',function(){ if(falg){ alert("点击"); falg=false; }else{ alert("切换"); falg=true; } }) 2、 $('#btn').toggle(function(){//为当前元素设置切换事

点击切换div

Chachako的博客

12-19

1042

最近在做一些小练习，今天做的是很简单的一个点击切换div内容的小demo。但是在写的时候自己异想天开的想了好些个办法解决遇到的问题，今天想总结一下自己那些错误的想法…… 1.onclick触发函数怎么传参我想把被点击的当前元素的索引传进我写好的函数里。我查了好些前辈的方法，但是在我这里不管用啊…我一个for循环直接把那个函数给调用了。 for(var i =0;i<tabList.length;i++){ tabList[i].onclick= changeTab(i);

按钮控制div切换背景图片_非常规 - VUE 实现特定场景的主题切换

weixin_39541869的博客

11-22

1016

实现页面皮肤切换，常见的方案有几种：替换 css 链接、替换 className、改变 css 原生变量值、使用 less.modifyVars、props 参数下发等；不同的业务场景，我们一般会选择不同的方法来实现目标。最近在公司运营活动平台上的主题功能的实现，我们尝试了一种新的解决方案，实现了页面主题的切换，目标是为了提高项目的可维护性、可扩展性，以及降低接入复杂度。“主题”需求在了解主题...

vue实现点击按钮切换背景颜色的示例代码

01-19

用vue简单的实现点击按钮切换背景颜色，具体代码如下所示： <div class=btnTitle> <div class=btn-bg class={bg:time click=changeBg(3)>15天</div> <div class=btn-bg class={bg:time click=changeBg(4)>30天</div> </div> <div class=btnTitle> <div class=btn-bg :class={bg:increase == 5} @click=ch

点击按钮切换div及其内容（两种方法：Vue指令方式，2024年最新前端项目实战案例

2401_83621541的博客

04-11

1985

跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。也许是互联网未来10年中最好的一年。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。

背景图切换特效代码

03-20

首先，我们要明白，背景图切换通常是通过JavaScript或CSS3来实现的。在这个案例中，由于未使用jQuery，我们可以预期代码会更加简洁且可能更注重性能优化。在不依赖外部库的情况下，原生JavaScript可以提供足够的功能...

jQuery鼠标点击切换背景图片代码.zip

11-22

本资源"jQuery鼠标点击切换背景图片代码.zip"显然是一个使用jQuery实现的简单功能，即当用户点击某个元素时，页面背景图片会进行切换。这个功能在网页设计中常用于创建交互性更强的用户体验。首先，我们来了解一下...

通过js实现图片左右点击图片左右切换效果

热门推荐

weixin_44543121的博客

01-19

1万+

通过js实现图片左右点击图片左右切换效果

css实现点击div改变背景图片，再点击更换成之前点击的样子

Anony_me的博客

06-24

2881

css实现点击div改变背景图片，再点击更换成之前点击的样子 1.定义一个点击事件，同时class绑定两个属性，showBtn为true是展示showBox的class属性 2.开始默认为， 3.展示开始默认的效果图： 4.点击，如果showBtn为true变为showBtn为false，如果showBtn为false变为showBtn为true 5.这里是style里面定义好的属性，你想展示点击后是什么样子，可以在hideBox添加相应属性。 6.点击完成之后，我的页面效果是位置发生变化，图片转换

JS页面四个颜色不同的div,鼠标进入哪个div,页面背景颜色变成该div的颜色。

Lou__Lan的博客

11-12

717

JS页面四个颜色不同的div,鼠标进入哪个div,页面背景颜色变成该div的颜色。

vue_案例_点击div的时候,改变背景色

weixin_42504805的博客

02-01

2792

vue_案例_点击div的时候,改变背景色

aDiligentCigarette的博客

06-02

997

有

js基础-点击切换div背景颜色

qq_41670147的博客

03-02

7262

随机产生一个十六进制的颜色值，封装成一个函数，进行调用！ function changeBgColor() { var str = "#"; //一个十六进制的值的数组 var arr = ["0", "1", "2", "3", "

只用H5C3完成点击图片div背景切换为对应图片