-1

基本上，我要做的就是将 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);
}
);
4

1 回答 1

1

工作小提琴链接。

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

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

于 2013-01-18T17:28:52.903 回答