jQuery UIのタブ内からの別タブへのリンクしてタブを切り替えることのメモ書き。ツレの案件で少し手間取ったので、その覚え書き。

jQuery UIのタブが次のように書く。適当なJQueryとjQuery UIのCSSとJavaScriptを設定できていることが前提。この辺りは、jQueryUIのサイトに書いてある。

<link href="css/import.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

以上のように設定してある。

JQueryUIのタブは、次のように設定する。

<script type="text/javascript">
  $(function() {
  $( "#tabs" ).tabs();
  });
});
<ul>
  <li><a href="#tabs-1">タブ1/a></a></li>
  <li><a href="#tabs-2">タブ2</a></li>
  <li><a href="#tabs-3">タブ3</a></li>
</ul>
<div id="tabs-1">タブ1の内容</div>
<div id="tabs-2">タブ2の内容</div>
<div id="tabs-3">タブ3の内容</div>

単純にタブ1の内容に、

<a href="#tab1-1">タブ2を表示</a>

と書いてもタブ1がタブ2に切り替えることができない。そこで次のように書く必要がある。

<script>
  $(function() {
  $( "#tabs" ).tabs();

  $('a.tab_link').click(function() {
    $( "#tabs" ).tabs( "option", "active", $(this).attr('rel') );
    $( "#tabs" ).tabs( "refresh" );
    return false;
    });
  });
</script>

<ul>
  <li><a href="#tabs-1">タブ1/a></a></li>
  <li><a href="#tabs-2">タブ2</a></li>
  <li><a href="#tabs-3">タブ3</a></li>
</ul>
<div id="tabs-1">タブ1の内容。<a class="tab_link" href="#" rel="2">タブ2を表示</a></div>
<div id="tabs-2">タブ2の内容</div>
<div id="tabs-3">タブ3の内容</div>

リンクのrel属性は、0～2がタブ1～3に対応している。

jQueryUIのバージョンによって、動きが変わっているかもしれないので注意が必要。「jQuery UI タブ　リンク」でGoogleで検索した結果で、参考になりそうなサイトのコードで試してみたけど動かなかった。結局はjQueryUIのサイトからAPIのマニュアルを見て、自分で作ったのでした。

Tabs Widget | jQuery UI API Documentation

jQuery UI

【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

SBクリエイティブ

¥343 （2025/04/17 01:58時点 | Amazon調べ）

Amazon

ポチップ

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

著:谷 拓樹

¥1,881 （2025/04/17 01:58時点 | Amazon調べ）

Amazon

ポチップ

HTML&CSSポケットリファレンス　［改訂3版］

技術評論社

¥1,980 （2025/04/17 01:58時点 | Amazon調べ）

Amazon

ポチップ