jQuery UIのタブ内からの別タブへのリンクで手こずったけど解決した話し

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のマニュアルを見て、自分で作ったのでした。