Question

我目前正在使用这段代码来显示和隐藏div。

我还想为每个链接选择一个自定义图像精灵。我尝试给每个链接它自己的ID和背景图像，但它似乎没有工作。

<a id=“btn1” class="showSingle" data-target="1">Option 1</a>

#btn1 { width:147px; height:172px; background: url(../img/btn1.png) no-repeat top; display:block;  }
#btn1 .selected { background-position:bottom; }

任何人都可以帮我修改/添加此代码以实现我想要的目标吗？

Answer 1

#btn1 .selected之间不应有空格，它应该是#btn1.selected

Answer 2

如果您想要添加背景图像，请执行以下操作：

$('.showSingle').on('click', function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.targetDiv').hide();
    $('#div' + $(this).data('target')).show();
    // adding the background.
    var imageURL = 'someURL';
    $('#div' + $(this).data('target')).css("background-image", 'url(' + imageURL + ')');
});
$('.showSingle').first().click();

希望有所帮助

显示隐藏Divs jQuery（更改每个链接的图像）

2 个答案: