当选项卡处于活动状态时，如何更改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> 

我想切换到那些“开”的图像的版本（“图像/ 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'); 
     }); 
    }); 
});