After modifying a jQuery tabs script to use images instead of tabs and adding code for image change on hover and click, I'm facing an issue. Whenever I click on an image, the tab should remain active and the image should stay changed, but it keeps reverting back to the original.
Here's 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 understand that it might be a bit messy, but any assistance in debugging this would be greatly appreciated :)