如何從圖像映射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

您應該更改如下選項卡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>