使用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/