jQuery 탭으로 이미지 바꾸기

Question

내 요구 사항에 맞게 jQuery 탭 스크립트를 변경하려고하는데 이미지에 탭을 바꿔서 jQuery 코드를 추가하여 마우스를 올려 놓고 이미지를 변경하고 클릭하십시오.

그러나 내 코드는 작동하지 않습니다. 이미지 중 하나를 누르면 탭이 활성화되고 이미지는 변경되지 않아야하지만 항상 원본으로 돌아갑니다. 여기

내 코드 :

function resetTabs(){ 
$("#container > div").hide(); 
     $("#tabs a").attr("id","");  
    } 
    var myUrl = window.location.href; 
    var myUrlTab = myUrl.substring(myUrl.indexOf("#"));  
    var myUrlTabName = myUrlTab.substring(0,4); 

    (function(){ 
     $("#container > div").hide(); 
     $("#tabs li:first a").attr("id","current"); 
     $("#container > div:first").fadeIn(); 
     $("#tabs a").on("click",function(e) { 
      e.preventDefault(); 
       if ($(this).attr("id") == "current"){ 
      return  
      } 
      else{    
      resetTabs(); 
      $(this).attr("id","current"); 
      $($(this).attr('name')).fadeIn(); 
      } 
     }); 

     for (i = 1; i <= $("#tabs li").length; i++) { 
     if (myUrlTab == myUrlTabName + i) { 
      resetTabs(); 
      $("a[name='"+myUrlTab+"']").attr("id","current"); 
      $(myUrlTab).fadeIn(); //  
     } 
    } 
})() 

$(function(){ 
$('.hoverfun').on('mouseenter mouseout', function(){ 
    var original = $(this).attr('src'); 
    var replacement = $(this).data('hoverimg');  
    $(this).attr('src', replacement).data('hoverimg', original); 
    }); 
}); 

$(function(){ 
$('.hoverfun').on('click', function(){ 
    var original = $(this).attr('src'); 
    var replacement = $(this).data('downimg'); 
    $(this).attr('src', replacement).data('downimg', original); 
    }); 
}); 

<ul id="tabs"> 
    <li><a href="#" name="#tab1"><img class="hoverfun" src="images/img1.png" data-hoverimg="images/img2.png" data-downimg="images/img3.png"></a></li> 
    <li><a href="#" name="#tab2"><img class="hoverfun" src="images/img1.png" data-hoverimg="images/img2.png" data-downimg="images/img3.png"></a></li> 
    <li><a href="#" name="#tab3"><img class="hoverfun" src="images/img1.png" data-hoverimg="images/img2.png" data-downimg="images/img3.png"></a></li> 
    <li><a href="#" name="#tab4"><img class="hoverfun" src="images/img1.png" data-hoverimg="images/img2.png" data-downimg="images/img3.png"></a></li> 

나는 그것의 혼란을 알고 있지만, 누군가가 나를 위해 살펴 수 있다면 나는 그것을 감사하겠습니다 :)

Answer 1

을 당신을 무엇인지 완전히 확실하지 성취하고 싶지만 어쩌면 이것이 도움이 될 것입니다.

클릭하면 .addClass()에서 .hoverfun까지의 클래스를 추가 할 수 있습니다. active과 같은 것입니다.

그런 다음 요소에 active이 .hasClass()으로 있는지 확인하고 해당 요소가있는 경우 마우스 오버 효과를 무시하십시오.

$(function() { 
    $('.hoverfun').on('mouseenter mouseout', function() { 
     if (!$(this).hasClass('active')) { 
      var original = $(this).attr('src'); 
      var replacement = $(this).data('hoverimg'); 
      $(this).attr('src', replacement).data('hoverimg', original); 
     } 
    }); 

    $('.hoverfun').on('click', function() { 
     $('.active').each(function() { 
      var o1 = $(this).attr('src'); 
      var o2 = $(this).data('hoverimg'); 
      var o3 = $(this).data('downimg'); 

      $(this).attr('src', o2).data('downimg', o1).data('hoverimg', o3).removeClass('active'); 
     }); 

     var original = $(this).attr('src'); 
     var replacement = $(this).data('downimg'); 
     $(this).attr('src', replacement).data('downimg', original).addClass('active'); 
    }); 
}); 

http://jsfiddle.net/3hqgh/1/