Question

基本上，我要做的就是将4个内容块包装在div中，然后让每个内容对应一个图像，并在单击div时更改图像。我知道这应该非常简单，但我对jquery的了解有限，主要依赖于插件。如果可能的话，我不想将信息div更改为链接。感谢

这是我目前的标记;使用基础网格

<div class="feature-one row clearfix">
    <div class="three columns">
        <span class="twelve columns activities-1">
            <p class="marker"> Title of Service</p>
                <p>Longer description of services</p>
        </span>
        <span class="twelve columns activities-2">
            <p class="marker"> Title of Service</p>
                <p>Longer description of services</p>
        </span>
    </div>

        <div class="six columns" >
            <img id="activities-1" src="screenshot.jpg"/>
            <img id="activities-2" src="screenshot.jpg"/>
            <img id="activities-3" src="screenshot.jpg"/>
        </div>

        <div class="three columns">
            <span class="twelve columns activities-3">
                <p class="marker"> Title of Service</p>
                    <p>Longer description of services</p>
            </span>
        </div>
</div>

非常感谢您的帮助！

更新：这是我拥有的最后一项;我相信它并不完美，可能更简洁，但我希望它可以帮助任何人看。对于任何想要清理它的人来说，也许让它与hoverIntent一起使用我欢迎您添加

    $('.feature-one img').each( function() {
    $(this).hide().filter(":first-child").show();;
});
$('.feature-one span').on('hover click', function() {
    var sName = $(this).attr('id');
    $('img#' + sName).fadeIn(800);
    $('.feature-one img').not($('img#' + sName)).fadeOut(800);
}
);

Answer 1

工作小提琴link。

$(document).ready( function() {
    $('img').hide();
    $('span').on('click', function() {
        var sName = $(this).attr('id');
        $('img#' + sName).toggle(800);
    });
});

我已经将属性id添加到每个span元素中，正如您在小提琴链接上看到的那样。

Jquery：如何通过单击相应的div来更改图像

1 个答案: