Bewegen zwischen 4 Tasten und haben Rollover geklickt zwischen

Question

Ich habe ein paar Dinge in der Nähe, was ich will, aber bin mir nicht sicher, wie zu implementieren, was ich tue.

Der unten stehende Code funktioniert einwandfrei, wurde aber nun aufgefordert, den Mauszeiger beim Klicken auf die Schaltfläche beizubehalten. Wie würde ich darüber gehen? Oder ist es besser, wieder mit Tasten und nicht Divs zu beginnen? Hier

ist ein jsfiddle (nicht sicher, warum alle divs hier zeigen, leben nur das erste man tut, was richtig ist)

Beispiel Taste:

<div id="tab1" class="tab" style="height:50px; width:160px; background-color:#CCC; float:left;"> 
    <img src=".../images/landing/terms-coach.jpg" onmouseover="this.src='.../images/landing/terms-coach-col-2.jpg'" onmouseout="this.src='.../images/landing/terms-coach.jpg'" /> 
</div> 

https://jsfiddle.net/uqxdum1o/

Answer 1

I habe das Markup und JS ein wenig modifiziert, um dorthin zu gelangen, aber ich denke, dass dieser Code die Tab-Anforderung erfüllen und einige der Inline-JS entfernen sollte.

Im Wesentlichen speichern das aktive Bild src in einem Attribut für jeden Reiter Button:

<div id="tab1" class="tab" style="..." 
    data-image-active="./images/button1-active.jpg" 
    data-image="./images/button1.jpg"> 
    <img src="./images/button1.jpg" /> 
</div> 

dies Dann nutzen Sie für jede Registerkarte Schaltfläche aktiven Zustand in Ihrem Javascript zu setzen. Ich habe Ihren aktuellen Code für die Klick-Handhabung auch in diese Schleife verschoben.

$(document).ready(function(){ 
    var $contents = $('.tab-content'); 
    $contents.slice(1).hide(); 
    $('.tab').each(function() { 
     $(this).hover(function() { 
       setButtonActive($(this)); 
      }, function() { 
      if (!$(this).hasClass('active')) { 
       setButtonInactive($(this)); 
      } 
     }); 
     $(this).click(function() { 
      resetAllButtons(); 
      setButtonActive($(this)); 
      $(this).addClass('active'); 

      var $target = $('#' + this.id + 'show').show(); 
      $contents.not($target).hide(); 
     }) 
    }); 
}); 

function setButtonActive(button) { 
    var img = button.find('img'), 
     imgSrc = button.attr('data-image-active'); 
    img.attr('src', imgSrc); 
} 
function setButtonInactive(button) { 
    var img = button.find('img'), 
     imgSrc = button.attr('data-image'); 
    img.attr('src', imgSrc); 
} 
function resetAllButtons() { 
    $('.tab').removeClass('active').each(function() { 
     setButtonInactive($(this)); 
    }); 
}