在4個按鈕之間移動，並在滾動過程中保持點擊

Question

我已經看到一些與我想要的東西接近的東西，但不知道如何實現我正在做的事情。

下面的代碼一切正常，但現在被要求讓每個按鈕被點擊時懸停在原地。我將如何去做這件事？或者更好地重新開始使用按鈕而不是div？

這裏是一個的jsfiddle（不知道爲什麼所有的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

我已經修改了標記和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)); 
    }); 
}