如何从图像映射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

你的逻辑有点不对劲。您告诉area在id为tabs-1的元素上触发单击，而不是单击应该激活tabs-1的tabs链接

您应该按如下方式进行更改：

• 为选项卡链接提供id (最简单的方法，但如果您需要，也可以使用其他方法)
• call click on the tab link

所以我的HTML应该是这样的：

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