-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');
 });

スワップ div を与える 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 に答える