jQuery　タブメニューへのダイレクトリンクの仕方を教えてください。

Question

jQuery UI タブ

http://allabout.co.jp/internet/javascript/closeup/CU20071220A/index2.htm

を参考にタブメニューを制作しているのですが、
同ページ及び、他ページから各タブメニューへ
ダイレクトにリンクすることはできるのでしょうか。

ただ、ここで
http://allabout.co.jp/internet/javascript/closeup/CU20071220A/index2.htm#tab2-3
とリンク先を指定すると「ソース」というところに
ダイレクトにリンクするのですが、
ボタン等で指定するとうまくリンクしません。。。。。


方法があれば教えてください。
よろしくお願いします。

fujillin · Accepted Answer

#1、2です。 ちょっと時間がとれましたので…

配布元のデモページ（↓）の例でいけば、最初のセッティングが
http://docs.jquery.com/UI/Tabs

　$("#tabs").tabs();

となっているのを

　var pn = location.search.match(/(\?|&)tab=(\d+)(&|\b)/)?RegExp.$2:'0';
　$("#tabs").tabs().tabs('select', parseInt(pn));

に変えてあげて、リンク元のURL指定を
　href="xxx.html?tab=1"
のようにしてあげれば、ご希望のようにできると思います。
（上例では2番目のタブが開いた状態になる）←タブ番号は最初が0

my-- · Answer

selectメソッドはフラグメント識別子を渡すと
href属性値を検索して一致する要素を選択するようです。

  $(function() {
    var obj = $("#tabs").tabs();
    //他ページから
    obj.tabs('select', location.href); //uri + フラグメント識別子
    // タブをクリックする代わりにテキストリンクでタブを選択する
    $('#link').click(function() { // リンクにクリックイベントをバインド
      obj.tabs('select', $('#link').attr('href'));
      return false;
    });
    // タブをクリックする代わりにボタンでタブを選択する
    $('#button').click(function() { // ボタンにクリックイベントをバインド
      obj.tabs('select', '#tabs-3');
      return false;
    });
  });

こんな書き方もできます。

noname#137826 · Answer

hogehoge.html#abc というURLが指定されたリンクをクリックすると、#abcに対応したタブが選択された状態でページを開きたい、ということですね。こんな感じでどうでしょう。 [html部分]

a
b
c

aa

bb

cc

[Javascript部分] $(function(){ //タブの要素 var container = $('#main'); //メニューからidのリストを取得する var list = []; container.find('ul:first > li > a').each(function(){ list.push($(this).attr('href')); }); //urlがidを含むものであった場合、そのidが上記のリストに含まれるかどうかを調べる var tabnum = 0; var url = window.location.href.split('#'); if (url.length > 1) { var id = '#' + url[1]; for (var i = 0, n = list.length; i < n; i++) { if (id == list[i]) { tabnum = i; break; } } } container.tabs({selected: tabnum }); });

fujillin · Answer

#1です。

＞他ページから戻ってきたときに前回開いたタブが残っている
＞のではなくて、～～
ありゃっ！　その通りに勘違いしていました。
はやとちりでしたね、大変申し訳ありませんでした。

検証している時間がないのですが…
和訳のページの「～テキストリンクでタブを選択する」を見ると、スクリプトから開くタブを指定する方法が書いてあるようなので、リンクのurlのクエリ部を利用するなどして、ロード時に該当するタブを開いてあげればよさそうですね。

urlの情報を取得する方法はこのあたりをご参考に…
http://www.tohoho-web.com/js/location.htm

fujillin · Answer

英語が苦手なのでよくわかりませんが…

（↓）にオプションとしてクッキーへ記録できるようなことが書いてあるみたいなので、このオプションを利用することで可能だと思われますが？
http://docs.jquery.com/UI/Tabs#options

jQuery タブメニューへのダイレクトリンクの仕方を教えてください。

#1、2です。

selectメソッドはフラグメント識別子を渡すと

hogehoge.html#abc というURLが指定されたリンクをクリックすると、#abcに対応したタブが選択された状態でページを開きたい、ということですね。

#1です。

英語が苦手なのでよくわかりませんが…

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

jQuery　タブメニューへのダイレクトリンクの仕方を教えてください。