タブのネーミング

指定したタブを、最初に開くようにページを読込むことができます。 これは、タブに名前を付け、URLのアンカー名を指定することでページを開くことにより実現します。 このページをオープンすると、2番目のタブが最初に開かれます。アンカーが #second であるURLが検索されます。

• タブ 1
• タブ 2
• タブ 3

見てわかるように、ペインは通常のアンカーリンクを持つことができます。 このアンカーリンクは、タブ名と一致している場合、そのタブが自動的に開かれます。

HTML コード

タブ名の href 属性に対する、ペイン内のリンクを見てください:

<!-- the tabs -->
<ul class="tabs">
	<li><a href="#first">タブ 1</a></li>
	<li><a href="#second">タブ 2</a></li>
	<li><a href="#third">タブ 3</a></li>
</ul>

<!-- タブ "panes" -->
<div class="panes">
	<div>First pane. <a href="#third">open third tab</a></div>
	<div>Second pane. You can open other tabs with normal <a href="#first">anchor links</a></div>
	<div>Third tab content</div>
</div>

JavaScript コード

タブの構造は、タブのための最小限の設定 と同じです。ここで特別な事は何もありません。

// 文書scriptの実行が可能になった後で、JavaScriptを実行する
$(function() {
	// div.panesの直下にある各divのタブとして動作するようにul.tabsをセットアップする
	$("ul.tabs").tabs("div.panes > div");
});