CODEWITHSUNDEEP
javascriptjqueryhtmlcsstabs
user3227675
user3227675

Reputation: 43

Swapping images with jQuery tabs

Im trying to change a jQuery tabs script to fit my needs, i swapped the tabs out for images and i added jQuery code to change the images on hover and click.

But my code isint working, when you press one of the images the tab should become active and the image should stay changed but it always goes back to the original.

Here my code:

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>

I know its messy, but if anyone could take a look for me i would appreciate it :)

Upvotes: 1

Views: 219

Answers (1)

Magnus Engdal
Magnus Engdal

Reputation: 5604

Not entirely sure what it is you want to accomplish, but maybe this will help.

You could add a class with .addClass() to .hoverfun when you click it. Something like active.

Then you could check and see if the element has active with .hasClass() and ignore the mouseover effects in case it does.

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

Upvotes: 1

Related Questions