javascript - 在 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));
    });
}