0

我正在使用其中几个 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”类“current”设置的熔岩灯菜单的悬停状态。

例如：单击菜单一上的链接#content2 有效，目标菜单二的悬停状态很好，但是当我在第二个菜单上单击返回#content1 时，我的lavalamp 菜单一的悬停背景位于第二个链接上第一个 - 尽管其他 css 样式（例如粗体文本）仍在设置为“当前”的正确链接上。只是那块“熔岩”飘到了错误的地方。

我希望我试图解释的内容是可以理解的。有谁知道如何避免与一页上的多个菜单发生冲突？

谢谢！

4

2 回答 2

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 回答
0

我自己发现了诀窍：

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

是我使用的，但是我使用了这些示例中建议的“selectedLava”，而不是不能正常工作的“current”类

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

于 2011-07-05T18:18:41.557 回答