UI Tabs で初期に選択されるタブを設定し、次回以降はクリックされたタブを選択表示させる

JavaScript jQuery

やりたいこと

  • 初めて訪問したユーザーに初期設定で選択したタブを表示する
  • 移動後にタブを表示するページに戻った場合は、最後にクリックしたタブを選択した状態で表示させる
<script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/js/jquery.ui.core.1.6rc2.min.js"></script>
<script type="text/javascript" src="/js/jquery.ui.tabs.1.6rc2.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
	var default_tab_id = 2;
	var COOKIE_NAME = 'ui-tabs-' + default_tab_id;
	tab_id = parseInt($.cookie(COOKIE_NAME)) || null
	if (tab_id == null) {
		/* Cookie がなければ、初訪問ということ */
		$("#area_lists > ul").tabs({
			/* 初期表示にしたいタブの index を設定する */
			selected: default_tab_id,
			cookie: {exprires: 7}
		})
	} else {
		/* 訪問済みならば、Cookie を取得して最後に選択したタブを表示させる */
		$("#area_lists > ul").tabs({
			cookie: {exprires: 7}
		})
	}
});
-->
</script>