javascript - 使用 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 的东西。

然后您可以使用 .hasClass() 检查并查看该元素是否具有 active 并忽略鼠标悬停效果，以防万一。

$(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/