0

私はこれらのjquery lavalampメニューのいくつかを使用しています http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/?cp=16

垂直の緩和されたスクロールを使用する 1 つのページ。したがって、次のアンカーにスクロールするたびに、クラス「現在」の「li」の別の初期ステータスを持つ新しいラバランプメニューがあります。

たとえば、最初の div-box #content1 には次の内容が含まれます。

    <ul class="lava">
    <li class="current"><a href="#content1">Apples</a></li>
    <li><a href="#content2">Pears</a></li>
    <li><a href="#content3">Oranges</a></li>        
    </ul>

そして、同じページの div #content 2 に

    <ul class="lava">
    <li><a href="#content1">Apples</a></li>
    <li class="current"><a href="#content2">Pears</a></li>
    <li><a href="#content3">Oranges</a></li>        
    </ul>

この方法は、リンクごとに時系列でクリックすると正常に機能します。しかし、前後にクリックすると、「li」クラス「current」によって最初に設定された溶岩ランプメニューのホバーステータスが台無しになります。

例: メニュー 1 のリンク #content2 をクリックすると、ターゲット メニュー 2 のホバー ステータスは問題ありませんが、2 番目のメニューをクリックして #content1 に戻ると、lavalamp メニュー 1 のホバー背景が 2 番目のリンクに表示されます。最初の - 他の css スタイル (太字テキストなど) は、「現在」に設定されている右側のリンクにまだあります。間違った場所に浮かぶのは「溶岩」のかけらです。

私が説明しようとしていることが理解できることを願っています。1ページに複数のメニューがあるこの競合を回避する方法を知っている人はいますか?

ありがとうございました！

4

2 に答える 2

0

私は自分でトリックを見つけました：

$j(function(){
    $j('.lava').lavaLamp({
        fx: 'easeOutBack',
        speed: 800,
        returnDelay: 500,
        returnHome: true,
        autoReturn: false,
        setOnClick: false
    });
});

私が使用したものですが、適切に機能しなかったクラス「current」の代わりに、これらの例で提案されているように「selectedLava」を使用しました

http://nixboxdesigns.com/projects/jquery-lavalamp/#options

于 2011-07-05T18:18:41.557 に答える
0 
<ul class="lava">
 <li class="current"><a href="#content1">Apples</a></li>
 <li><a href="#content2">Pears</a></li>
 <li><a href="#content3">Oranges</a></li>        
</ul>

そして、同じページの div #content 2 に

<ul class="lava2">
<li><a href="#content1">Apples</a></li>
<li class="current"><a href="#content2">Pears</a></li>
<li><a href="#content3">Oranges</a></li>        
</ul>

そしてどこかに、次のようなものを書きます

<script type="text/javascript">
    $(function() { $(".lava").lavaLamp({ fx: "backout", speed: 700 })});
    $(function() { $(".lava2").lavaLamp({ fx: "backout", speed: 700 })});
</script>

別々に

于 2011-07-03T17:36:42.053 に答える