当选项卡处于活动状态时，如何更改jQuery选项卡上的图像？

Question

我使用的是jQuery选项卡，我使用的是每个选项卡的图像而不是文本。当选项卡处于活动状态时，我想更改图像。选项卡本身的代码是：

<ul>
<li><a href="#tabs-1"><img src="images/dashboard_off.gif"/></a></li>
<li><a href="#tabs-2"><img src="images/advertising_off.gif"/></a></a></li>
<li><a href="#tabs-3"><img src="images/marketing_off.gif"/></a></li>
<li><a href="#tabs-4"><img src="images/office_off.gif"/></a></li>
<li><a href="#tabs-5"><img src="images/networking_off.gif"/></a></li>
<li><a href="#tabs-6"><img src="images/education_off.gif"/></a></li>
</ul>

我想将它们切换到图像的"on“版本(”映像/dashboard_on.gif“等等)。

我的剧本是：

<script type="text/javascript">
$(function(){
    $( "#tabs" ).tabs({
    event: "mouseover"
    });
    });
</script>

任何帮助都将不胜感激！

Answer 1

您可以考虑使用背景图像，而不是内联地使用图像；这样，您可以在.ui-state-active上将其切换出去。

如果您一定要使用内联映像，您可以尝试如下：

$(function(){
    $( "#tabs" ).tabs({
        event: "mouseover"
    })
    .find('> ul > li').hover(function() {
        $(this).find('img').prop('src', function(i, v) {
            return v.replace('off.gif', 'on.gif');
        });
    },
    function() {
        $(this).find('img').prop('src', function(i, v) {
            return v.replace('on.gif', 'off.gif');
        });
    });
});