jQuery LavaLamp : lavaLamp 외부의 하이퍼 링크를 사용하여 필수 LI에서 lavalamp 강조 표시를 이동/설정하는 방법

Question

이 질문은 전에 질문되었지만 답변을 얻을 수 없습니다. 나는 그 안에 4 개의 LI가있는 Lavalamp를 가지고 있는데, 각각을 클릭하면 div에있는 일부 내용이로드됩니다.

모두 정상적으로 작동합니다. 이제 나는 그 lavalamp 외부의 같은 페이지에 어딘가에 하이퍼 링크를 가지고 있습니다. 그 링크를 클릭하면 lavalamp 강조 표시가 특정 li로 이동하여 거기에 남아 있어야합니다.

분명히하기 위해, 나는 집, 직장, 정보, 연락처와 같이가는 Lavalamp LI를 가지고 있습니다. 또한 페이지의 어딘가에 '연락처'링크가 있습니다. '연락처'링크를 클릭하면 lavaLamp가 하이라이트를 어디에서든지 '연락처'의 네 번째 옵션으로 이동해야합니다.

Answer 1

this lavalamp plugin을 사용하는 경우 demo입니다. 여기에 demo 인 경우 마우스 센터와 클릭 이벤트를 활성화하려면 trigger()을 사용해야합니다.

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> 

---

당신이 다른 lavalamp 플러그인을 사용하고 있기 때문에 LOL, 좋아, ... 여기에 사용할 수있는 코드는 스크립트

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

. 또한, lavaplamp 플러그인이 클릭 기능을 제공하기 때문에, 거기에 함수 ( new 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> 

스크립트

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

이제 콘텐츠가 잘로드됩니다. 그러나 'work'또는 'contact me'링크를 클릭하면 lavaLamp의 형광펜을 해당 LI로 옮기고 싶습니다. 즉 '직장'과 '연락'이 있습니다.

여기 LavaLamp 버전을 사용하고 있습니다 : http://gmarwaha.com/blog/?p=7