こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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
とリンク先を指定すると「ソース」というところに
ダイレクトにリンクするのですが、
ボタン等で指定するとうまくリンクしません。。。。。


方法があれば教えてください。
よろしくお願いします。

投稿日時 - 2010-01-13 17:24:24

QNo.5590389

すぐに回答ほしいです

質問者が選んだベストアンサー

#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

投稿日時 - 2010-01-14 17:54:05

お礼

お返事ありがとうございます。

上記のやり方でできました。
助かりました。ありがとうございます!

投稿日時 - 2010-01-15 18:45:02

このQ&Aは役に立ちましたか?

6人が「このQ&Aが役に立った」と投票しています

回答(5)

ANo.5

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;
});
});

こんな書き方もできます。

投稿日時 - 2010-01-14 20:43:34

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 });
});

投稿日時 - 2010-01-14 16:27:59

ANo.2

#1です。

>他ページから戻ってきたときに前回開いたタブが残っている
>のではなくて、~~
ありゃっ! その通りに勘違いしていました。
はやとちりでしたね、大変申し訳ありませんでした。

検証している時間がないのですが…
和訳のページの「~テキストリンクでタブを選択する」を見ると、スクリプトから開くタブを指定する方法が書いてあるようなので、リンクのurlのクエリ部を利用するなどして、ロード時に該当するタブを開いてあげればよさそうですね。

urlの情報を取得する方法はこのあたりをご参考に…
http://www.tohoho-web.com/js/location.htm

投稿日時 - 2010-01-13 22:27:20

ANo.1

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

(↓)にオプションとしてクッキーへ記録できるようなことが書いてあるみたいなので、このオプションを利用することで可能だと思われますが?
http://docs.jquery.com/UI/Tabs#options

投稿日時 - 2010-01-13 18:36:09

補足

回答ありがとうございます。

クッキーの記録に関してですが
他ページから戻ってきたときに
前回開いたタブが残っている
のではなくて、
同ページ、他ページからリンクしたときに
指定したタブが開かれる
ようにしたいのですが、

引き続き、方法があれば教えてください。
よろしくお願いします。

投稿日時 - 2010-01-13 19:29:12

お礼

先ほどの英語サイトの和訳ページがあったのですが、
http://tech.ludicmind.net/javascript/jquery/jquery_uitabs.html

・ページを去らず、現在のタブのリンクを開く
・タブをクリックする代わりにテキストリンクでタブを選択する

このあたりが答えに近い気がしたのですが、
恥ずかしながら、知識不足で
見ただけではわかりませんでした。

誰か具体的に説明できる方いませんでしょうか。。。。
お願いします。

投稿日時 - 2010-01-13 20:01:49

あなたにオススメの質問