несколько меню jquery lavalamp на одной странице - PullRequest
Новая
       22

несколько меню jquery lavalamp на одной странице

0 голосов
/ 03 июля 2011

Я использую несколько таких меню 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 в меню 1 работаети состояние наведения целевого меню два в порядке, но когда в этом втором меню я щелкаю обратно к # content1, фон моего меню lavalamp при наведении мыши находится на второй ссылке вместо первой - хотя другие стили CSS (такие какполужирный текст) по-прежнему на правой ссылке, которая установлена ​​на «текущий».Это просто кусок "лавы", который плывет не туда.

Надеюсь, то, что я пытаюсь объяснить, понятно.Кто-нибудь знает, как избежать этого конфликта с несколькими меню на одной странице?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 05 июля 2011

Я сам обнаружил хитрость: 

$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

0 голосов
/ 03 июля 2011 
<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>

ОТДЕЛЬНО

...