使用jQuery标签交换图像

Question

我试图改变一个jQuery标签脚本以适应我的需要，我将这些标签换成了图像，并且我添加了jQuery代码来更改悬停和单击图像。

但我的代码isint工作，当你按其中一个图像的选项卡应该变为活动和图像应该保持改变，但它总是会回到原来的。

这里我的代码：

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/