JQuery Lavalamp: come spostare/impostare il punto culminante di Lavalamp su Li richiesto usando collegamenti ipertestuali al di fuori del Lavalamp

Question

Ora questa domanda è stata posta prima, ma non sono in grado di ottenere la risposta. Ho un Lavalamp con 4 LI al suo interno, facendo clic su ciascuno di essi carica alcuni contenuti in un div.

Funziona tutto bene. Ora ho un collegamento ipertestuale da qualche parte sulla stessa pagina al di fuori di quella Lavalamp. Lo voglio, quando faccio clic su quel link, il punto di vista di Lavalamp dovrebbe passare a una particolare LI e rimanere lì.

Per chiarire me, ho un Livalamp Li che va così: casa, lavoro, a circa, contatto. E ho anche un link a "contatto" da qualche parte sulla pagina. Quando faccio clic su Link "Contatta", il lavalamp dovrebbe spostare l'evidenziazione da dove si trova alla quarta opzione "Contatto".

Answer 1

Se stai usando Questo plugin Lavalamp, dovrai usare trigger() Per attivare il mousenter e fare clic su eventi ... ecco un Demo.

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>

Sceneggiatura

$(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, dal momento che stai usando l'altro plug -in Lavalamp ... ecco il codice che puoi usare. Inoltre, poiché il plug -in Lavaplamp fornisce una funzione Click, ho reso il JavaScript discreto aggiungendo la funzione lì (Nuova demo).

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>

Sceneggiatura

$(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 qualche dettaglio in più. Ecco la lavalamp e un collegamento ipertestuale fuori di esso.

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

Ora il contenuto viene caricato bene e bene. Ma quando faccio clic sul link "lavoro" o "Contattami", voglio anche che l'evidenziatore nel lavalamp si sposti sui corrispondenti Li. cioè "lavoro" e "contatto" rispettivamente.

Sto usando la versione di Lavalamp trovata qui: http://gmarwaha.com/blog/?p=7