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/

使用jQuery选项卡交换图像

1 个答案: