4つのボタンの間を移動し、ロールオーバーをクリックしたままにする

Question

私は何かに近いものを見たことがありますが、私がやっていることにどうやって実装するかはわかりません。

以下のコードはすべて正常に動作しますが、各ボタンをクリックするとホバー滞在を維持するように求められています。私はこれについてどうやって行くのですか？それとも、divを使わずにボタンを使ってやり直す方が良いでしょうか？

<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

私は：ここでは

はjsfiddle（なぜすべてのdivがここに表示されているかわからない、最初の1が正しいれない唯一の生きる）ボタンの

例ですマークアップとJSを少し修正しましたが、このコードはタブの要件を満たし、インラインJSの一部を削除する必要があります。

本質的には、各タブボタンの属性にアクティブな画像srcを格納します。

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

次に、各タブボタンのためにあなたのJavaScriptでアクティブ状態を設定するためにこれを使用しています。私はクリック処理のためのあなたの現在のコードをこのループにも移動しました。

$(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)); 
    }); 
}