탭이 활성화되어있을 때 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'); 
     }); 
    }); 
});