tabsではまった！

対象

• jQuery UIのtabsを使っている人
• tabをスクリプトから切り替えたい人

問題のコード

HTML

<div id="tabarea">
	<ul id="tabs">
		<li><a href="#tabs-tab1">tab1</a></li>
		<li><a href="#tabs-tab2">tab2</a></li>
	</ul>
	<div id="tabs-tab1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
	</div>
	<div id="tabs-tab2" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
	</div>
</div>

サンプルにもあるようなタブの構成。
タブの本文部分は「class="ui-tabs-panel ui-widget-content ui-corner-bottom"」を指定しておくときれいに見える(はず)。

JavaScript

jQuery(document).ready(function (){
	$('#tabarea').tabs();
	// 現在のタブを表示
	// デフォルトなので、0が表示される
	alert($('#tabarea').tabs("option","selected"));
	
	// 現在のタブを切り替える
	// 間違いのあるコード
	$('#tabarea').tabs("option","selected", 1);
	
	// 正しいコード
	$('#tabarea').tabs("select", 1);
});

「間違いのあるコード」は読み取り専用であるべき情報に対して書き込みを行っている。
そのため、内部情報だけが変更され、表示に変化が発生しない。

参考文献

• Tabs | jQuery UI