- ベストアンサー
jQuery タブメニューへのダイレクトリンクの仕方を教えてください。
jQuery UI タブ http://allabout.co.jp/internet/javascript/closeup/CU20071220A/index2.htm を参考にタブメニューを制作しているのですが、 同ページ及び、他ページから各タブメニューへ ダイレクトにリンクすることはできるのでしょうか。 ただ、ここで http://allabout.co.jp/internet/javascript/closeup/CU20071220A/index2.htm#tab2-3 とリンク先を指定すると「ソース」というところに ダイレクトにリンクするのですが、 ボタン等で指定するとうまくリンクしません。。。。。 方法があれば教えてください。 よろしくお願いします。
- sunn_t
- お礼率28% (4/14)
- JavaScript
- 回答数5
- ありがとう数8
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
#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
その他の回答 (4)
- my--
- ベストアンサー率89% (91/102)
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; }); }); こんな書き方もできます。
hogehoge.html#abc というURLが指定されたリンクをクリックすると、#abcに対応したタブが選択された状態でページを開きたい、ということですね。 こんな感じでどうでしょう。 [html部分] <body> <div id="main"> <ul> <li><a href="#a">a</a></li> <li><a href="#b">b</a></li> <li><a href="#c">c</a></li> </ul> <div id="a">aa</div> <div id="b">bb</div> <div id="c">cc</div> </div> </body> [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
- ベストアンサー率61% (1594/2576)
#1です。 ＞他ページから戻ってきたときに前回開いたタブが残っている ＞のではなくて、～～ ありゃっ！ その通りに勘違いしていました。 はやとちりでしたね、大変申し訳ありませんでした。 検証している時間がないのですが… 和訳のページの「～テキストリンクでタブを選択する」を見ると、スクリプトから開くタブを指定する方法が書いてあるようなので、リンクのurlのクエリ部を利用するなどして、ロード時に該当するタブを開いてあげればよさそうですね。 urlの情報を取得する方法はこのあたりをご参考に… http://www.tohoho-web.com/js/location.htm
- fujillin
- ベストアンサー率61% (1594/2576)
英語が苦手なのでよくわかりませんが… （↓）にオプションとしてクッキーへ記録できるようなことが書いてあるみたいなので、このオプションを利用することで可能だと思われますが？ http://docs.jquery.com/UI/Tabs#options
お礼
先ほどの英語サイトの和訳ページがあったのですが、 http://tech.ludicmind.net/javascript/jquery/jquery_uitabs.html ・ページを去らず、現在のタブのリンクを開く ・タブをクリックする代わりにテキストリンクでタブを選択する このあたりが答えに近い気がしたのですが、 恥ずかしながら、知識不足で 見ただけではわかりませんでした。 誰か具体的に説明できる方いませんでしょうか。。。。 お願いします。
補足
回答ありがとうございます。 クッキーの記録に関してですが 他ページから戻ってきたときに 前回開いたタブが残っている のではなくて、 同ページ、他ページからリンクしたときに 指定したタブが開かれる ようにしたいのですが、 引き続き、方法があれば教えてください。 よろしくお願いします。
お礼
お返事ありがとうございます。 上記のやり方でできました。 助かりました。ありがとうございます！