ここから本文です

jQueryタブメニューにて、他ページからダイレクトリンクする方法について

miu0512elさん

2013/4/411:50:50

jQueryタブメニューにて、他ページからダイレクトリンクする方法について

現在タブメニューの実装をしております。

Aのページにて、B.html#tab2のようなハッシュタグでtab2がダイレクトで表示されるようにしたいのですが、
なかなかうまくいきません。

他の方の質問内容や、検索して出てきたものを試したのですが、知識が浅いせいかうまく動作しませんでした。

すみませんが、ご回答のほどよろしくお願いいたします。

//スクリプト部分

<script type="text/javascript">
$(document).ready(function() {
//初期表示
$(".tab_content").hide();//全ての.tab_contentを非表示
$("ul.tabs li:first").addClass("active").show();//tabs内最初のliに.activeを追加

$(".tab_content:first").show();//最初の.tab_contentを表示
//タブクリック時
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");//.activeを外す
$(this).addClass("active");//クリックタブに.activeを追加
$(".tab_content").hide();//全ての.tab_contentを非表示
var activeTab = $(this).find("a").attr("href");//アクティブタブコンテンツ
$(activeTab).fadeIn();//アクティブタブコンテンツをフェードイン
return false;
});
});
</script>

//タブメニュー部分

<ul class="tabs">
<li><a href="#tab1">hoge</a></li>
<li><a href="#tab2">hoge</a></li>
<li><a href="#tab3">hoge</a></li>
</ul>

//内容部分

<div class="tab_content" id="tab1">
内容
</div>

<div class="tab_content" id="tab2">
内容
</div>

<div class="tab_content" id="tab3">
内容
</div>

閲覧数:
2,458
回答数:
1
お礼:
500枚

違反報告

ベストアンサーに選ばれた回答

zpp2777さん

編集あり2013/4/414:50:02

miu0512elさん

hash値はwindow.location.hashで取得できます。
それを元に初期設定を構築すればいいですね。

<li><a href="#tab1">hoge</a></li>
のhref値と
<div class="tab_content" id="tab1">
のid値が連動しているとして

┌────────────┐
//初期表示
$(".tab_content").hide();//全ての.tab_contentを非表示
$("ul.tabs li:first").addClass("active").show();//tabs内最初のliに.activeを追加
$(".tab_content:first").show();//最初の.tab_contentを表示
└──↓──────↓──┘
┌────────────┐
//初期表示
var acc = "",idx = "";
// hash値がある場合
if(window.location.hash){
// ハッシュをaccに代入
acc = window.location.hash;
// #hash値の要素が存在するかチェック
if($(acc).length){
// a href="#ハッシュ値"が存在するliのindex番号を調べる
idx = $("ul.tabs li:(a[href='" + acc + "']").parent("li").index("li"); // 修正しました
} else{
// 要素が存在しなければaccを初期化
acc = "";
}
}
// accに値がない場合は代入しておく
if(!acc){acc = ":first";idx = "0";}
// acc以外の.tab_contentを非表示
$(".tab_content").not(acc).hide();
// tabs内のliでindex番号がidx番に.activeを追加
$("ul.tabs li").eq(idx).addClass("active").show();
└────────────┘

質問した人からのコメント

2013/4/4 19:35:05

ありがとうございます!無事解決しました!!

ただ、タブへのリンクなので、B.html#tab2 で飛ばした場合、B.htmlのトップ(一番上)からの表示はできなかったのですが、他に方法があるのでしょうか。。また悩みが増えてしまいました><!

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問や知恵ノートは選択されたID/ニックネームのMy知恵袋で確認できます。