-3

我有一个链接列表，后跟一个 DIV，如下所示：

<div class="masthead screen">

<ul class="mast screen">
<li><a href="#">Relacionarse<br />con Efectividad</a></li>
<li><a href="#">Productividad<br />Personal</a></li>
<li><a href="#">Confianza</a></li>
<li><a href="#">Vivir la Vida<br />Plenamente</a></li>
<li><a href="#">Rompimientos</a></li>
<li><a href="#">Hacer una<br />Diferencia</a></li>                  
</ul>

<div class="mast-text screen"><p>DEFAULT TEXT una era de rompimientos–una era de avances sin precedentes que han mejorado ampliamente la calidad de nuestras vidas</p>
<p><span class="size-16"><strong>El Foro Landmark</strong></span><br />es ese tipo de rompimiento. Es un rompimiento en lo que es posible para las personas</p>
</div>

<div class="mast-text screen"><p>LINK ONE en una era de rompimientos–una era de avances sin precedentes que han mejorado ampliamente la calidad de nuestras vidas</p>
<p><span class="size-16"><strong>El Foro Landmark</strong></span><br />es ese tipo de rompimiento. Es un rompimiento en lo que es posible para las personas</p>
</div>

<div class="mast-text screen"><p>LINK TWO en una era de rompimientos–una era de avances sin precedentes que han mejorado ampliamente la calidad de nuestras vidas</p>
<p><span class="size-16"><strong>El Foro Landmark</strong></span><br />es ese tipo de rompimiento. Es un rompimiento en lo que es posible para las personas</p>
</div>

<div class="mast-text screen"><p>LINK THREE en una era de rompimientos–una era de avances sin precedentes que han mejorado ampliamente la calidad de nuestras vidas</p>
<p><span class="size-16"><strong>El Foro Landmark</strong></span><br />es ese tipo de rompimiento. Es un rompimiento en lo que es posible para las personas</p>
</div>

<div class="mast-text screen"><p>LINK FOUR en una era de rompimientos–una era de avances sin precedentes que han mejorado ampliamente la calidad de nuestras vidas</p>
<p><span class="size-16"><strong>El Foro Landmark</strong></span><br />es ese tipo de rompimiento. Es un rompimiento en lo que es posible para las personas</p>
</div>

<div class="mast-text screen"><p>LINK FIVE en una era de rompimientos–una era de avances sin precedentes que han mejorado ampliamente la calidad de nuestras vidas</p>
<p><span class="size-16"><strong>El Foro Landmark</strong></span><br />es ese tipo de rompimiento. Es un rompimiento en lo que es posible para las personas</p>
</div>

<div class="mast-text screen"><p>LINK SIX en una era de rompimientos–una era de avances sin precedentes que han mejorado ampliamente la calidad de nuestras vidas</p>
<p><span class="size-16"><strong>El Foro Landmark</strong></span><br />es ese tipo de rompimiento. Es un rompimiento en lo que es posible para las personas</p>
</div>

</div>

这是我的 jQuery：

<script>
$(function(){
    var $container = $(".masthead"),
        $testimonials = $(".mast-text", $container).hide();

    $(".mast li", $container).hover(function() {
        $testimonials.eq( $(this).addClass("active").index() ).show();
    }, function() {
        $testimonials.eq( $(this).removeClass("active").index() ).hide();
    });
});
</script>

悬停交换有效，但我不知道如何在未使用悬停时显示默认内容。

.mast-text如果没有悬停，我需要将第一个 DIV 的内容作为默认值。

我该怎么做呢？

4

2 回答 2

0 
$('ul li').hover(function(){
   var ind=$(this).index();
   $('#swap').html($('.swaps').eq(ind).html());
},function(){
   $('#swap').html('DEFAULT CONTENT FOR WHEN NOTHING TRIGGERED');
 });

给交换 divs class="swaps"

于 2013-06-04T13:39:01.903 回答
0

你可以这样做：

$(function(){
    // store default content
    var def = $('#swap').html();

    $('a').hover(function(){
        $('#swap').html($($(this).attr('href')).html());
    }, function(){
        $('#swap').html(def);
    });
});

这是一个jsfiddle：http: //jsfiddle.net/ycyfn/

于 2013-06-04T13:42:12.463 回答