1

I am using jQuery tabs, and I am using images for each tab instead of text. I would like to change the images when the tab is active. The code for the tabs themselves is:

<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>

I would like to switch those to the "on" version of the image ("images/dashboard_on.gif" and so on).

My script is:

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

Any help would be greatly appreciated!

4

1 に答える 1

-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');
        });
    });
});
于 2012-07-11T22:45:36.497 に答える