他ページからタブ内のアンカーリンクへ飛ぶ方法

別ページのリンクで、該当タブの中にあるハッシュタグで指定された箇所へ飛ぶようにしたいです。
（例：tab1.htmlの『タブ1のlink1へ』をクリックすると、tab2.htmlのタブ1の#link1に飛ぶ）
JSの部分に、ハッシュの指定を入れれば良いのかなと思ったのですが、いまいちわからず…。
どなたかお教えいただけると助かります。

■tab1.html

/*タブへダイレクトリンクしつつ、更にその中のアンカーポイントへ*/
<a href="tab2.html?no=tab1#link1">タブ1のlink1へ</a>
<a href="tab2.html?no=tab2#link2">タブ2のlink2へ</a>

■tab2.html

/* タブ */
<ul class="tab_area">
 <li id="tab1" class="select">タブ1</li>
 <li id="tab2">タブ2</li>
</ul>

<div class="content_area">
タブ1の内容
 <div class="link1">
  link1の内容
 </div>
</div>

<div class="content_area hide">
タブ2の内容
 <div class="link2">
  link2の内容
 </div>
</div>

■CSS

.hide{
 display:none;
}

■JS

$(function() {
 $('ul.tab_area li').click(function() {
  var index = $('ul.tab_area li').index(this);
  $('.content_area').css('display','none');
  $('.content_area').eq(index).show();
  $('.tab_area li').removeClass('select');
  $(this).addClass('select');
 });
 var url = location.href;
 url = (url.match(/\?no=tab\d+$/) || [])[0];
 var params = url.split("?");
 var tab = params[1].split("=");
 if($(tab).length){
  var tabname = tab[1];
 } else {
  var tabname = "tab1";
 }
 $('.content_area').css('display','none');
 $('.tab_area li').removeClass('select');
 var tabno = $('ul.tab_area li#' + tabname).index();
 $('.content_area').eq(tabno).show();
 $('ul.tab_area li').eq(tabno).addClass('select');
});

Aタグが閉めタグしかない

すみません、不要なタグでした。ご指摘ありがとうございます。

質問文内のコードだと結果はどのようになりますか？

<a href="tab2.html?no=tab1#link1">タブ1のlink1へ</a>
をクリックすると
URLはtab2.html?no=tab1#link1になり、tab2.htmlのタブ1に飛びますが、指定した#link1の部分にはなりません。
<a href="tab2.html?no=tab2#link2">タブ2のlink2へ</a>をクリックすると、
URLはtab2.html?no=tab2#link2になりますが、tab2.htmlのタブ1に飛び、指定した#link2の部分にもなりません。

coco_bauer

2016/05/26 07:13

どのような動作をさせたいと考えているのですか？　まず、それを明確にしましょう。

退会済みユーザー

2016/05/26 10:23

質問文内のコードだと結果はどのようになりますか？

kogure

2016/05/27 11:47

tab2.htmlのli内のAタグが閉めタグしかないですよ。できればできるだけ実際のコードを載せていただけると検証しやすいです。

行動規範の内容に同意します

回答2件

ベストアンサー

とりあえずURL取得の部分に問題があり、if($(tab).length) が必ず失敗します。
まず下記記事のように location.search で採って、それを処理するのが良いと思います。

JavaScript
1var url = location.search.slice( 1 ).split( '&' );
2// [ 'a=bbb', 'c=ddd' ] のような配列が変数urlに格納される
3// 無い場合は [ '' ] という配列が変数urlに格納される

【javascriptでクエリ文字列を取得する - Qiita】
http://qiita.com/ma_me/items/03aaebb5dc440b380244

あとは「インデックス番号を受け取ったらタブを切り替える関数」をきちんと作り、URLから取り出した情報を使って関数を動かせば良いと思います。

JavaScript
1function switch_tab( index ) {
2	$( '.content_area' ).css( 'display', 'none' ).eq( index ).show();
3	$( '.tab_area li' ).removeClass( 'select' ).eq( index ).addClass( 'select' );
4}
5switch_tab( get_current_tab() ); // get_current_tab()がURLからタブのインデックスを取得すると仮定