Question

我正在使用其中几个jquery lavalamp菜单 http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/?cp=16

在一个使用垂直缓动滚动的页面上。因此，每当我滚动到我的下一个锚时，都会有一个新的lavalamp菜单，其中另一个初始状态为“li”，其类为“current”。

例如，第一个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”类“当前”设置。

例如：单击菜单1上的＃content2链接，目标菜单2的悬停状态正常，但是当在第二个菜单上时，我点击返回＃content1我的lavalamp菜单的悬停背景一个在第二个链接而不是第一个 - 尽管其他css样式（例如粗体文本）仍然位于设置为“current”的右侧链接上。它只是漂浮在错误位置的那块“熔岩”。

我希望我试图解释的是可以理解的。有谁知道如何通过一页上的几个菜单来避免这种冲突？

谢谢！

Answer 1

<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>

SEPARATALLY

Answer 2

我自己发现了这个伎俩：

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

是我使用的，但后来代替了“当前”类，我使用的没有正常工作这些例子中建议的“selectedLava”

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

一页上有几个jquery lavalamp菜单

2 个答案: