1

现在这个问题已经被问过了，但我无法得到答案。我有一个内部有 4 个 LI 的 Lavalamp，单击它们中的每一个都会在 div 中加载一些内容。

一切正常。现在，我在该 lavalamp 之外的同一页面上的某处有一个超链接。我希望，当我单击该链接时，lavalamp 突出显示应该移动到特定的 li 并保持在那里。

为了清楚起见，我有一个 Lavalamp LI，它是这样的：家庭、工作、关于、联系方式。而且我在页面的某处还有一个“联系人”链接。当我单击“联系”链接时，lavaLamp 应该将突出显示从任何位置移动到第 4 个选项“联系”。

4

2 回答 2

1

如果你使用这个 lavalamp 插件，你需要使用trigger()来激活 mouseenter 和 click 事件...这里有一个演示。

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 插件提供了点击功能，我通过在其中添加功能（新演示）使 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');
 });

});
于 2010-08-10T10:21:43.567 回答
0

好的，更多细节。这是 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

于 2010-08-10T10:29:36.353 回答