이미지 맵 href (및 탭 목록)에서 jquery 탭을 활성화하는 방법은 무엇입니까?

Question

나는 생각할 수있는 모든 옵션을 시도해보고 다른 게시물에서 답변을 찾으려고했습니다. 탭 위의 이미지 맵을 클릭 할 때 페이지에서 jQuery 탭을 열려고합니다.

$(function() { 
    $("#tabs").tabs(); 
}); 

<div id="tabs"> 
<map name="Map" id="Map"> 
<area shape="rect" onclick="$('#tabs-1').click();" coords="11,121,159,222" href="#tabs-1" target="_self" alt="tabs-1" /> 
<area shape="rect" onclick="$('#tabs-2').click();" coords="164,85,300,153" href="#tabs-2" target="_self" alt="tabs-2" /> </map> 

    <ul> 
    <li><a href="#tabs-1">Tab1</a></li> 
    <li><a href="#tabs-2">Tab2</a></li> 
</ul> 

<div id="tabs-1"> 
lorem ipsum 
</div> 
<div id="tabs-2"> 
lorem est 
</div> 
</div> 

탭은 URL에 표시되지만 탭을 활성화하려면 페이지를 다시로드해야합니다.

Answer 1

로직이 약간 꺼져 있습니다. 아이디 tabs-1와 요소에 클릭을 트리거 할 area을 말하는 대신 tabs-1

다음과 같이 변경해야

활성화하도록되어 탭의 링크를 클릭 :

• 당신의 탭 링크에 ID를 부여를 (당신이 원하는 경우 가장 쉬운 방법은, 그러나 다른 사람은)

그래서 내 HTML은 다음과 같이 보일 것이다 탭 링크를

전화 click 사용할 수 있습니다

<div id="tabs"> 
<map name="Map" id="Map"> 
<area shape="rect" onclick="$('#tabs-1-link').click();" coords="11,121,159,222" href="#tabs-1" target="_self" alt="tabs-1" /> 
<area shape="rect" onclick="$('#tabs-2-link').click();" coords="164,85,300,153" href="#tabs-2" target="_self" alt="tabs-2" /> </map> 

    <ul> 
    <li><a href="#tabs-1" id="tabs-1-link">Tab1</a></li> 
    <li><a href="#tabs-2" id="tabs-1-link">Tab2</a></li> 
</ul> 

<div id="tabs-1"> 
lorem ipsum 
</div> 
<div id="tabs-2"> 
lorem est 
</div> 
</div>