$(function() { // 下ナビclickイベント var bottomNav = $('ul.bottom-navigation li').click(function (event) { var index = bottomNav.index(this); tabsObj.tabs('select', index); // indexタブを選択します（Methods - select） event.preventDefault(); }); // 下ナビ初期カレントclass設定 bottomNav.eq(0).addClass('active-nav'); var tabsObj = $('#tabs').tabs({ select: function(event, ui) { // タブが切り替えられると呼出されます（Events - select） // 下ナビカレント要素にクラス'active-nav'付与（ui.indexで選択されたindexを参照できます） bottomNav.removeClass('active-nav').eq(ui.index).addClass('active-nav'); } }); }); 下ナビ： <ul class="bottom-navigation"> <li><a href="#tab1">タブ１</a></li> <li><a href="#tab2">タブ２</a></li> </ul> http://jqueryui.com/demos/tabs/ 切り替えにMethods - select。カレント表示にはEvents - selectが使えると思います。 ------------------------------------- 追記：補足について var n = 0; // 初期値 var hash = location.hash; if (hash !== '') { // hashに値があれば $('#tab1,#tab2').each(function (i) { // eachメソッドでタブ要素を走査します if ($(hash)[0] === this || $(hash, this)[0]) { // hash要素が自身か子孫から見付かれば tabsObj.tabs('select', i); // タブを選択 n = i; // 初期値変更 return false; // 探索終了 } }); } // 下ナビ初期カレントclass設定 bottomNav.eq(n).addClass('active-nav'); http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1063052680 上記リンク先では子孫要素だけを対象にしていますから上手くいかないのだと思います。タブ内容の親要素（#tab1,#tab2）も比較対象にしてやればいいです。 因みに、タブ内容の親へのリンクの場合デフォルトで対象タブが開くよう実装されています。子孫へのリンクでなければ tabsObj.tabs('select', i); // タブを選択 この行は不要です。