이미지 맵 href에서 jquery 아코디언을 활성화하는 방법은 무엇입니까?

Question

나는 내 모든 질문에 대한 답변을 찾았습니다.

나는 간단한 jquery 아코디언이 있으며 내부 링크에서 특정 섹션을 활성화 할 수 있기를 원합니다. 뷰어가 이미지 영역을 클릭하여 아코디언의 해당 섹션을 활성화하도록 링크가 이미지 맵에서 나옵니다. 충분히 단순 해 보이지만 나는 그걸 가지고 지옥이있다. 나는이 코드가 될 필요가 무엇에서 떨어져 방법을 것을 발견 할 수있었습니다 내용을 기반으로 알고

$(function() { 
$("#myaccordion").accordion({ 
    active: false, 
    autoHeight: false, 
    navigation: true   
}); 
}); 

<img src="Map.png" name="map" width="650" height="336" usemap="#hotspot" id="mymap" /> 

<map name="hotspot" id="hotspot"> 
    <area shape="poly" coords="251,125,241,181,287" href="#section1" target="_self" alt="section1" /> 
    <area shape="poly" coords="155,223,133,194,96" href="#section2" target="_self" alt="section2" /> 
</map> 

<div id="myaccordion"> 
<h3><a href="#section1">Section 1</a></h3> 
<div> 
    <p> 
    Section 1 content 
    </p> 
</div> 
<h3><a href="#section2">Section 2</a></h3> 
<div> 
    <p> 
    Section 2 content 
    </p> 
</div> 

그러나 이것은 가장입니다 : 그래서 예를 들어

지금까지이 나는 그 순간을 알아낼 수있다.

다른 스레드를 기반으로 얻을 수있는 가장 가까운 것은 href #을 사용하여 외부 링크에서 섹션을 활성화하는 것입니다.하지만 페이지를 다시로드하지 않고도이 작업을 수행해야합니다.

Answer 1

, 당신이 단순히 그들에 click()하고 드롭 다운 메뉴의 해당 섹션 활성화 할 수 있습니다 귀하의 area 태그

<h3 id="acc_1"><a href="#section1">Section 1</a></h3> 
<div> 
    <p> 
    Section 1 content 
    </p> 
</div> 
<h3 id="acc_2"><a href="#section2">Section 2</a></h3> 
.... <!-- and so forth --> 

, 당신과 같이 onclick 속성을 추가 할 수

를 모양에서

<area shape="poly" onclick="$('#acc_1').click();" coords="251,125,241,181,287" href="#section1" target="_self" alt="section1" /> 

Answer 2

나는 당신이 성취하고자하는 것을 알고 있다고 생각합니다. 왜 'trigger'을 쓰지 않으시겠습니까? 이것은 이벤트를 시뮬레이션합니다. 당신은 당신이 #objectB를 가져 가면 #objectA에 클릭을 트리거 할 경우 예를 들어, 당신이 사용하는 것 : 링크를 클릭하면

$('#obectB').bind('hover', function() { 
    $('#objectA').trigger('click'); 
}); 

를 귀하의 경우에는, 당신은 시뮬레이션 어떤 객체에 어떤 이벤트가 그 것 아코디언이 당신이 원하는 것을하도록하십시오. 당신의 섹션 제목 id 특성을 제공함으로써

Answer 3

전화 자바 스크립트 :

<area shape="poly" coords="251,125,241,181,287" href="javascript:yourFunction(someVariable)" target="_self" alt="section1" />