Question

对于商业网站，我正在努力实现以下目标： - 来自客户的推荐信的div。 - 包含来自这些客户的徽标的列表。

当用户将鼠标悬停在徽标上时，应在div中显示正确的推荐。

我有以下标记：

<div id="testimonial-container"><div class="testimonial">Here comes a testimonial</div>
    <div class="testimonial">Here comes another testimonial</div>
    <div class="testimonial">And another one</div>
    <ul class="testimonial-logos">
       <li><a><img src="logo-1.jpg" /></a></li>
       <li><a><img src="logo-2.jpg" /></a></li>
       <li><a><img src="logo-3.jpg" /></a></li>
    </ul>
</div>

悬停效果将使用CSS（不透明度：0和1）完成，因此它实际上不是滑块。

要将一个类添加到活动推荐，我使用以下代码：

jQuery('#testimonial-container .testimonial-logos a').hover(function(){
    jQuery('#testimonial-container .testimonial, #testimonial-container .testimonial-logos a').addClass('active');
});

如何切换div中的推荐信？提前谢谢！

Answer 1

我会给你的每个见证提供一个ID，例如<div class"testimonial" id="logo-1.jpg">然后在你的徽标上找到正确的推荐书并显示它

Answer 2

假设推荐书与相应徽标的顺序相同，那么这样的内容将起作用（放置在文档就绪处理程序中或位于正文末尾的脚本块中）：

var $container = $("#testimonial-container"),
    $testimonials = $(".testimonial", $container).hide();

$(".testimonial-logos li", $container).hover(function() {
    $testimonials.eq( $(this).addClass("active").index() ).show();
}, function() {
    $testimonials.eq( $(this).removeClass("active").index() ).hide();
});

演示： http://jsfiddle.net/YG5aV/3

这会缓存一个包含证明div的jQuery对象，并立即将它们全部隐藏起来。然后在悬停处理程序中，在鼠标上输入，它会显示与徽标悬停相对应的徽标，并在鼠标离开时再次隐藏它。

更新：如果打算只在鼠标上输入而不是鼠标输入并离开，那么我建议.mouseenter()而不是.hover()，因为后者是分配输入处理程序和离开处理程序的快捷方式。以下是您在评论中描述的内容 - 请注意结尾处的.eq(0).mouseenter()，它会触发第一个li元素的mouseenter，以便它成为活动的元素。

var $container = $("#testimonial-container"),
    $testimonials = $(".testimonial", $container).hide(),
    $prev;

$(".testimonial-logos li", $container).mouseenter(function() {
    if ($prev)
       $testimonials.eq( $prev.removeClass("active").index() ).hide();
    $testimonials.eq( ($prev = $(this).addClass("active")).index() ).show();
}).eq(0).mouseenter();

演示：http://jsfiddle.net/YG5aV/4/

Answer 3

您可以使用.index（）和.eq（）选择器来确定您悬停的链接。

$('#testimonial-container .testimonial-logos a').hover(function(){
    var index = $('#testimonial-container .testimonial-logos a').index(this);
    $('#testimonial-container .testimonial, #testimonial-container .testimonial-logos a').removeClass('active');
    $('#testimonial-container .testimonial, #testimonial-container .testimonial-logos a').eq(index).addClass('active');
});

jsfiddle链接： http://jsfiddle.net/8EgB4/

Answer 4

您可以使用index获取悬停的孩子的序数，然后使用nth-child selector访问相关的推荐。第n个子选择器使用序数，因此您需要将1添加到索引值以获取正确的推荐。您还需要确保以相同的顺序列出您的徽标和推荐书。

悬停链接时更改内容div

4 个答案: