How to activate jquery tabs from an image map href (and the tab list as well)?

Question

I have tried all options I could think off and tried to find the answer in other posts. I am trying to have jQuery tabs open on the page when clicking on image maps above the tabs.

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

The tabs show up in the url but the page needs to be reloaded in order for the tab to be active.

Answer 1

Your logic is slightly off. Your telling the area to trigger a click on an element with id tabs-1 instead of clicking the tabs LINK that is supposed to activate tabs-1

You should change as follows:

• Give an id to your tab links (easiest way, but others are available if you want)
• call click on the tab link

So my HTML would look like this:

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