jQuery LavaLamp：如何使用lavaLamp外部的超鏈接移動/設置所需LI上的lavalamp高亮顯示

Question

現在，此問題已被問到，但我無法得到答案。我有一個裏面有4個LI的Lavalamp，點擊它們中的每一個加載div中的一些內容。

它工作得很好。現在我在lavalamp之外的同一頁面上有一個超鏈接。我想要的是，當我點擊那個鏈接時，lavalamp亮點應該移動到某個特定的位置並保持在那裏。爲了讓自己清楚，我有一個像這樣的Lavalamp LI：Home，Work，About，Contact。我還在頁面的某個地方有一個「聯繫」鏈接。當我點擊「聯繫人」鏈接時，lavaLamp應該將突出顯示從任何地方移動到第四個選項「聯繫人」。

Answer 1

如果您使用的是this lavalamp plugin，則需要使用trigger()來激活mouseenter並單擊事件...這是一個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> 

腳本

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

---

大聲笑，沒關係，因爲你使用的是其他LavaLamp的插件......這裏是您可以使用的代碼。此外，由於lavaplamp插件提供點擊功能，因此我通過在其中添加函數（new demo）使JavaScript不顯眼。

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> 

腳本

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

好一些更多的細節。這是lavalamp和它外面的超鏈接。

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

現在內容加載得很好。但是，當我點擊「工作」或「聯繫我」鏈接時，我也希望lavaLamp中的熒光筆移動到相應的LI。即分別是「工作」和「聯繫人」。

我正在使用LavaLamp版本：http://gmarwaha.com/blog/?p=7