![](https://iknow-base.cdn.bcebos.com/lxb/notice.png)
jquery怎么实现点击一个元素更换背景图片,连续点击永远在2张图片之间更换
实现的方法和操作步骤如下:
1、首先,打开html编辑器,创建一个新的html文件,例如index.html,然后引入jquery,如下图所示。
2、其次,完成上述步骤后,在index.html的<script>标记中,输入下图红框中的jquery代码,如下图所示。
3、接着,完成上述步骤后,浏览器运行index.html页面,显示出了其中1张背景图片,如下图所示。
4、最后,完成上述步骤后,再次单击“点击更换”按钮,这时背景图像被更改为另一幅,如下图所示。这样,问题就解决了。
需要准备的材料分别有:电脑、html编辑器、浏览器。
1、首先,打开html编辑器,新建html文件,例如:index.html,并引入jquery。
2、在index.html中的<script>标签,输入jquery代码:。
var no = 0;
var arr = ['small2.png', 'small3.png'];
function fun() {
no ^= 1;
$('body').css('background-image', 'url(' + arr[no] + ')');
}
3、浏览器运行index.html页面,此时显示出了其中1张背景图片。
4、再点击“点击更换”按钮,此时背景图片又被更换到另一张。
可以采用如下思路:分别将两种背景图片设为两个类,然后使用toggleClass()方法切换类:
$(selector).toggleClass('class_a').toggleClass('class_b');
示例如下:
创建Html代码:一个简单的div用于显示背景图片
<div class="test"></div>
设置css样式:分别为两个背景设计一个类
div.test{width:264px;height:152px;margin:50px;border:4px dashed #ccc;}
.bg1{background:url('bg1.png');}
.bg2{background:url('bg2.png');}编写jquery代码:点击切换类实现背景的变换
$(function(){
$("div.test").addClass('bg1'); // 初始化时添加背景1
$("div.test").click(function() {
$(this).toggleClass('bg1').toggleClass('bg2');
});
})观察效果
我可以在加强一下,把那个更改图片的换成更改样式 点击元素 class值一直在变化
toggle 这个不是点击事件吧
$("#change").toggle(function () { $("body").removeClass("body2").addClass("body1"); }, function () { $("body").removeClass("body1").addClass("body2"); })
toggle是一个循环事件