JQuery Lavalamp: Como mover/definir o destaque do Lavalamp no LI necessário usando hiperlinks fora do Lavalamp

Question

Agora, essa pergunta já foi feita antes, mas não consigo obter a resposta. Eu tenho um lavalamp com 4 li dentro dele, clicando em cada um deles carrega algum conteúdo em uma div.

Funciona tudo bem. Agora eu tenho um hiperlink em algum lugar na mesma página fora desse Lavalamp. Quero que, quando clico nesse link, o destaque do Lavalamp deve passar para um LI específico e permanecer lá.

Para me deixar claro, tenho um Lavalamp Li que é assim: casa, trabalho, sobre, contato. E também tenho um link de 'contato' em algum lugar da página. Quando clico em link 'Contato', o Lavalamp deve mover o destaque de onde quer que esteja para a 4ª opção 'contato'.

Answer 1

Se você está usando Este plugin Lavalamp, você precisará usar trigger() Para ativar os eventos do MouseEnter e Click ... aqui está um demonstração.

Html

<ul id="menu">
 <li><a href="#home">Home</a></li>
 <li><a href="#work">Work</a></li>
 <li><a href="#about">About</a></li>
 <li><a href="#contact">Contact</a></li>
</ul>
<br>
<a class="contact" href="#contact">contact me!</a>

Roteiro

$(document).ready(function(){
 $('ul#menu').lavaLamp();
 $('.contact').click(function(){
  $('#menu a[href*=contact]').parent().trigger('mouseenter').trigger('click');
  return false; // added to prevent propogation
 });
});

---

LOL, OK, já que você está usando o outro plug -in do Lavalamp ... aqui está o código que você pode usar. Além disso, como o plug -in LavaPLAMP fornece uma função de clique, eu fiz o JavaScript discreto adicionando a função lá (nova demonstração).

Html

<ul class="lavalamp">
 <li class="current"><a href="#home">Home</a></li>
 <li><a href="#work">Work</a></li>
 <li><a href="#about">About</a></li>
 <li><a href="#contact">Contact</a></li>
</ul>

<br><br><br>

<div id="home" class="info">
 Home page stuff goes here.
</div>
<div id="work" class="info">
 Work information goes here.
</div>
<div id="about" class="info">
 About me.
</div>
<div id="contact" class="info">
 Contact me.
</div>

<br><br><br>

<div class="links">
 You can see my <a href="#work">work</a> or <a href="#contact">contact me.</a>
</div>

Roteiro

$(function() {
 // set up lavalamp
 $(".lavalamp").lavaLamp({
  fx: "backout",
  speed: 700,
  click: function(event, menuItem) {
   // change information box
   var $block = $( $(menuItem).find('a').attr('href') );
   $('.info').not($block).hide();
   $block.fadeIn();
   return false;
  }
 });

 // initialize information box
 $('.current').trigger('click');

 // make links outside of the lavalamp work
 $('.links a').click(function(){
  var block = $(this).attr('href');
  $('.current').removeClass('current');
  $('.lavalamp').find('a[href=' + block + ']').parent().trigger('click');
 });

});

Answer 2

Ok, mais alguns detalhes. Aqui está o Lavalamp e um hiperlink fora dele.

<ul class="lavaLamp">
    <li><a href="javascript:content(1)">Home</a></li>
    <li><a href="javascript:content(2)">Work</a></li>
    <li><a href="javascript:content(3)">About</a></li>
    <li><a href="javascript:content(4)">Contact</a></li>    
</ul>

---
<div class="info">
// Corresponding information will be loaded here based on javascript:content(num)
<div>
---

<div>
    You can see my <a href="javascript:content(2)">work</a> or <a href="javascript:content(4)">contact me.</a>
</div>

Agora o conteúdo está bem carregado. Mas quando clico no 'trabalho' ou no link 'Entre em contato', também quero que o marcador no Lavalamp se mova para os LI correspondentes. ou seja, 'trabalho' e 'contato', respectivamente.

Estou usando a versão Lavalamp encontrada aqui: http://gmarwaha.com/blog/?p=7