Question

我会尝试尽可能具体。我的网站上有一组9个投资组合图标。点击一个 - 我希望div的“背景图像”改变它们。我最好喜欢它淡入。

这是投资组合图标的代码：

<ul class="gallery">
    <li><a href="#" class="thumb"><span><img src="images/work-icon-1.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-2.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-3.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-4.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-5.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-6.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-7.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-8.jpg" alt="" /></span></a></li>
    <li><a href="#" class="thumb"><span><img src="images/work-icon-9.jpg" alt="" /></span></a></li>
</ul>

这是我需要更改的div，具体取决于他们点击的图标：

<div class="work-header"></div>

非常感谢任何帮助。

Answer 1

您希望将背景图像更改为什么？

$('.thumb').click(function() {
  $('#word-header').css('background-image', 'url("img.jpg")');
});

是基本语法。再详细说明一下，我会更新。

编辑您可以将背景图像存储为每个图标的HTML5“数据 - ”属性，如下所示：

<img src="images/work-icon-1.jpg" alt="" data-header-img="images/header-1.jpg" />

然后像这样做jQuery：

$('.thumb').click(function() {
  $('#word-header').css('background-image', "url("+$(this).attr('data-header-img')+")");
});

淡化图像更复杂。您可以在Google上找到很多解决方案，或者希望有人会花时间向您展示如何。

Answer 2

背景渐弱可能确实要复杂得多，但似乎在你的情况下你可以通过简单地淡化所讨论元素背后的绝对定位div来使用一种不同的方法。 This fiddle证明了这一点。基本上，必要的jquery是：

$("#btn1").click(function() {
    $("#img1").fadeIn(1000);
    return false;
});

但是你当然希望扩展它以更好地处理按钮列表并淡出之前点击的“背景”。您可以将div的id存储为淡入data-bgElementId标签的<a>属性（或其他），然后在点击处理程序中使用它：

$(".thumb").click(function() {
    var bgElementId = $(this).attr("data-bgElementId"),
        bgElement = $("#" + bgElementId);

    bgElement.fadeIn(1000);
    $(".allBGs").not(bgElement).fadeOut(1000);
    return false;
});

单击图像时更改背景图像

2 个答案: