我已经尝试了所有我能想到的选项,并试图在其他帖子中找到答案。我正在尝试在单击选项卡上方的图像映射时在页面上打开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 中,但需要重新加载页面才能使选项卡处于活动状态。
你的逻辑有点不对劲。 您告诉area
触发对 id tabs-1
元素的单击,而不是单击应该激活tabs-1
的选项卡 LINK
您应该按如下方式进行更改:
- 为您的标签链接提供一个 ID(最简单的方法,但如果需要,可以使用其他方法)
- 在选项卡链接上呼叫
click
所以我的 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>