我正在为我工作的公司制作一个扩展/崩溃电话费率表。我目前有一个表下面有一个按钮来展开它,按钮说“展开”。它是功能性的,除了我需要按钮改变为“折叠”时,它被点击,然后当然回到“展开”时,再次点击。按钮上的文字是背景图像。
所以基本上我所需要的是改变一个div的背景图像时,它被点击,除了有点像一个切换。
我正在为我工作的公司制作一个扩展/崩溃电话费率表。我目前有一个表下面有一个按钮来展开它,按钮说“展开”。它是功能性的,除了我需要按钮改变为“折叠”时,它被点击,然后当然回到“展开”时,再次点击。按钮上的文字是背景图像。
所以基本上我所需要的是改变一个div的背景图像时,它被点击,除了有点像一个切换。
当前回答
$('#divID').css("background-image", "url(/myimage.jpg)");
应该这样做,只是在元素上的点击事件中连接它吗
$('#divID').click(function()
{
// do my image switching logic here.
});
其他回答
$('#divID').css("background-image", "url(/myimage.jpg)");
应该这样做,只是在元素上的点击事件中连接它吗
$('#divID').click(function()
{
// do my image switching logic here.
});
使用jQuery有两种不同的方法来更改背景图像CSS。
$('选择'). css(“分辨率”,“url(图片/ example.jpg)”); $('选择'). css({“背景图像”:“url(图片/ example.jpg)”});
仔细观察,注意不同点。在第二种方法中,您可以使用传统的CSS并将多个CSS属性串在一起。
我使用正则表达式,因为我想保留一个相对路径,而不使用添加addClass函数。我只是想让它变得复杂,哈哈。
$(".travelinfo-btn").click(
function() {
$("html, body").animate({scrollTop: $(this).offset().top}, 200);
var bgImg = $(this).css('background-image')
var bgPath = bgImg.substr(0, bgImg.lastIndexOf('/')+1)
if(bgImg.match(/collapse/)) {
$(this).stop().css('background-image', bgImg.replace(/collapse/,'expand'));
$(this).next(".travelinfo-item").stop().slideToggle(400);
} else {
$(this).stop().css('background-image', bgImg.replace(/expand/,'collapse'));
$(this).next(".travelinfo-item").stop().slideToggle(400);
}
}
);
一种方法是把两个图像放在HTML中,在SPAN或DIV中,你可以用CSS隐藏默认值,或者用JS隐藏页面加载。然后你可以切换到点击。下面是一个类似的例子,我用来把左/下图标放在列表上:
$(document).ready(function(){
$(".button").click(function () {
$(this).children(".arrow").toggle();
return false;
});
});
<a href="#" class="button">
<span class="arrow">
<img src="/images/icons/left.png" alt="+" />
</span>
<span class="arrow" style="display: none;">
<img src="/images/down.png" alt="-" />
</span>
</a>
如果你为背景图像使用CSS精灵,你可以根据你是在展开还是折叠背景偏移+/- n个像素。不是切换,但比切换背景图像url更接近切换。