jQuery LavaLamp:如何使用lavaLamp外部的超链接在所需的LI上移动/设置lavalamp高亮显示 [英] jQuery LavaLamp: How to move/set the lavalamp highlight on required LI using hyperlinks outside the lavaLamp

问题描述

现在已经有人问过这个问题，但我找不到答案.我有一个内含4 LI的Lavalamp，单击它们中的每个将在div中加载一些内容.

Now this question has been asked before but I am not able to get the answer. I have a Lavalamp with 4 LI inside it, clicking on each of them loads some content in a div.

一切正常.现在，在该lavalamp之外，同一页面上的某个地方有超链接.我希望，当我单击该链接时，lavalamp高亮显示应移至特定的li并保持在那里.

It works all fine. Now I have a hyperlink somewhere on the same page outside of that lavalamp. I want that, when I click on that link, the lavalamp highlight should move to a particular li and remain there.

为了清楚起见，我有一个Lavalamp LI，它是这样的:家庭，工作，关于，联系.而且我在页面的某个地方也有一个联系"链接.当我单击联系人"链接时，lavaLamp应该将突出显示位置从任何位置移动到第四个选项联系人".

To make myself clear, I have a Lavalamp LI that goes like this: Home, Work, About, Contact. And I also have a 'contact' link somewhere on the page. When I click 'contact' link, the lavaLamp should move the highlight from wherever it is to the 4th option 'Contact'.

推荐答案

如果您使用的是该lavalamp插件，则需要使用trigger()激活鼠标输入并单击事件...这是

If you are using this lavalamp plugin, you'll need to use trigger() to activate the mouseenter and click events... here is a 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插件提供了click功能，因此我在其中添加了功能(新演示).

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');
 });

});

这篇关于jQuery LavaLamp:如何使用lavaLamp外部的超链接在所需的LI上移动/设置lavalamp高亮显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！