1

私は考えられるすべてのオプションを試し、他の投稿で答えを見つけようとしました。タブの上にある画像マップをクリックすると、ページ上で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に表示されますが、タブをアクティブにするにはページを再ロードする必要があります。

4

1 に答える 1

1

あなたの論理は少しずれています。アクティブ化するはずのタブのリンクをクリックする代わりに、areaIDを持つ要素のクリックをトリガーするように指示しますtabs-1tabs-1

次のように変更する必要があります。

  • タブリンクに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>
于 2012-12-10T22:02:56.927 に答える