Question

当用户悬停/点击菜单项时，我试图动态更改某些菜单选项的背景图像。为此，我使用JQuery .css（）方法来更改背景图像。当用户点击菜单项时，我将所有菜单项的背景图像更改回其原始状态，然后修改单击的菜单项。我如何使用JQuery执行此操作？（图像文件都以相同的方式保存“/PictureLibrary/NavBarShortcuts/'menuItemID'.gif”和“/PictureLibrary/NavBarShortcuts/'menuItemID'Active.gif”）使用的图像应反映菜单项的状态。因为我在使用PHP生成它时动态分配默认背景图像，所以我不相信我可以使用多类CSS来分配背景图像，因为缺少非活动类的CSS。虽然我可能错了。

继承我所拥有的：

$('.menuItem').css( "background-image", "url(../PictureLibrary/NavBarShortcuts/PRODUCTIDHERE.gif)");
$('.menuItem active').css( "background-image", "url(../PictureLibrary/NavBarShortcuts/PRODUCTIDHEREActive.gif)");

我有多个菜单项，所有菜单项都具有从数据库动态生成的不同ID。即。

<div class="menuItem" id="product1">
//I need to change these background images dynamically.
</div>
<div class="menuItem" id="product2">
//I need to change these background images dynamically.
</div>
<div class="menuItem" id="product3">
//I need to change these background images dynamically.
</div>
<div class="menuItem" id="product4">
//I need to change these background images dynamically.
</div>

Answer 1

不要在这个问题上使用jQuery，而是使用CSS。您可以轻松实现相同的目标。

假设你有：

<nav>
    <ul>
      <li><a href="#">MenuA</a></li>
      <li><a href="#">MenuB</a></li>
      <li><a href="#">MenuB</a></li>
    </ul>
</nav>

CSS：

nav > ul li > a:hover {
   background-color: orange;
}

Answer 2

也许：

$(document).ready(function(){
    $('.menuItem').each(function(i){
        $(this).css("background-image", "url(../PictureLibrary/NavBarShortcuts/"+this.id+".gif)");
    });
    $('.menuItem').click(function(){
        $(this).siblings().filter(".active")
            .removeClass("active")
            .each(function(i){
                $(this).css("background-image", "url(../PictureLibrary/NavBarShortcuts/"+this.id+".gif)");
            });
        $(this).addClass("active")
            .css( "background-image", "url(../PictureLibrary/NavBarShortcuts/"+this.id+"Active.gif)");
    });
});

通过萤火虫或类似的东西检查这个小提琴，看风格是否改变（因为图像不存在，所以无法加载）：http://jsfiddle.net/Y9HzN/

Answer 3

我建议，虽然没有经过测试：

$('.menuItem').hover(function(){
    this.src = this.src.replace('.jpg', 'Active.gif');
}, function(){
    this.src = this.src.replace('Active.jpg','.gif');
});

这假定src首先设置为适当的URI（并根据需要简单地插入或删除Active字符串）。如果您每次都需要使用实际的id：

$('.menuItem').hover(function(){
    $(this).attr('src', "/PictureLibrary/NavBarShortcuts/" + this.id + ".gif"
}, function(){
    $(this).attr('src', "/PictureLibrary/NavBarShortcuts/" + this.id + "Active.gif"
});

参考文献：

如何在函数中获取JQuery项的ID？

3 个答案: