jQuery UI Tabsでタブのリンクに普通のURLを書くと、ページ遷移なしでそのURLのHTMLを読み込んでタブ内のコンテンツとして表示してくれる。スムーズでよいが、そのままでは静的なリンクにはできない。
また、タブのリンクのURLをハッシュ（「#」で始まる文字列で、要素のidを指定する）にすると、ページ内の該当要素のみをタブ内のコンテンツとして表示してくれるが、別のページへの遷移としては使えない。
なので、タブの見た目だけを使いたくて、リンクは普通に静的リンクにしたい場合はこんな感じにする。
page1.html
<div id="tabs">
<ul>
<li><a href="#tab-content">タブ1に表示するラベル</a></li>
<li><a href="page2.html">タブ2に表示するラベル</a></li>
</ul>
<div id="tab-content">
ページの内容
</div>
</div>
page2.html
<div id="tabs">
<ul>
<li><a href="page1.html">タブ1に表示するラベル</a></li>
<li><a href="#tab-content">タブ2に表示するラベル</a></li>
</ul>
<div id="tab-content">
ページの内容
</div>
</div>
JavaScript
$('#tabs').tabs({
//Ajaxで読み込むのを阻止
select: function(event, ui) {
var url = $.data(ui.tab, "load.tabs");
if (url) {
location.href = url;
return false;
}
return true;
},
//選択状態にするタブのindex
selected: 0 // ← 1つ目のタブなら0、2つ目のタブなら1というように動的に変える
});
ポイント
- tabs()のselectオプションでタブクリック時は普通にページ遷移するようにする
- tabs()のselectedオプションで表示中のページのタブを選択状態にする
- 表示中のページのタブのhref属性はURLではなくハッシュ（#xxxx）にすることにより、そのページのコンテンツを表示する
参考
投稿
