Обмен изображениями с вкладками 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/