別ページから飛んで来たとき、タブを切り替えて表示させたい

Question

###別ページから飛んで来たときに、タブを切り替えて表示させたい
クラス「navi_wrap」をタブとして、
タブをクリックすると、クラス「box_wrap」に指定の内容を表示させる。
いわゆるタブの切り替えを実装。

1ページのみなら、これで完結なのですが、
別のページからリンクでとんできた際に、タブを切り替えて表示させたい。
と思い参考ページになるページを見ながら、記述してみましたが、うまく実装できません。
どこに不備があるのか分からず、行き詰まってます。
お助けを！

●参考ページ
http://irohacross.net/2015/02/jquery_tab.html

###タブの切り替え
1ページ内で完結させる、タブの切り替えの実装は、以下通りにできました。

<!-- タブ -->
<ul class="navi_wrap clearfix">
  <li class="tab01 active">メニュー01</li>
  <li class="tab02">メニュー02</li>
  <li class="tab03">メニュー03</li>
</ul>
<!-- 内容 -->
<div class="box_wrap">
  <div id="box01" class="box_text">
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
  <div id="box02" class="box_text">
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
  <div id="box03" class="box_text">
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>
</div>

/*タブ*/
ul.navi_wrap{ }
ul.navi_wrap li{
  float: left;
  background: #ccc;
  border: 1px solid #000;
  padding: 5px;
  text-align: center;
}
ul.navi_wrap li.active{
  font-weight: bold;
  background: #000;
  color: #fff;
}

/*内容*/
.box_wrap{
  width: 500px;
  height: 150px;
  border: 1px solid #000;
  overflow-x: hidden;
  overflow-y: auto;
}
.box_wrap .box_text{
  padding: 5px 10px;
  display: none;
}
#box01{background: #9BFF90; display: block;}
#box02{background: #FB9F60;}
#box03{background: #56F5FD;}
.box_wrap p{margin-bottom: 10px;}

$(function() {
	$('ul.navi_wrap li').click(function() {
		//クリックされたタブの位置
		var index = $('ul.navi_wrap li').index(this);

		//コンテンツをすべて非表示
		$('.box_text').css('display','none');
		//指定内容のみ表示
		$('.box_text').eq(index).fadeIn();

		//タブをすべてoff
		$('ul.navi_wrap li').removeClass('active');
		//選択したタブのみon
		$(this).addClass('active');
	});
});

###別ページからリンクしてきた場合
タブの切り替えがあるページと同じ階層に、
リンクボタンを実装したページを作成。

<ul>
  <li><a href="index.html#box01">メニュー1にリンク</a></li>
  <li><a href="index.html#box02">メニュー2にリンク</a></li>
  <li><a href="index.html#box03">メニュー3にリンク</a></li>
</ul>

このままボタンをおしても、ページが切り替わるだけで、タブが切り替わってくれない。

ので、タブの切り替えがあるページのJavaScriptを
参考ページを元に追加記述。

●参考ページ
http://irohacross.net/2015/02/jquery_tab.html

$(function() {
  //#以下を取得
  var hash = location.hash ;
  //[#box～]であるか確認
  hash = (hash.match(/^#box\d+$/) || [])[0];

 if($(hash).length){
  //[#box～]である場合、#より後を取得	
    var tabname = hash.slice(1) ;
  } else{
    //[#box～]でない場合、「box01」を表示
    var tabname = "box01" ;
  }
  //コンテンツを一度すべて非表示
  $('.box_text').css('display','none');
  //一度タブについているクラスactiveを削除
  $('.navi_wrap li').removeClass('active');

  var tabno = $('ul.navi_wrap li#' + tabname).index();

  //クリックされたタブと同じ順番のコンテンツを表示します。
  $('.box_text').eq(tabno).fadeIn();
  //クリックされたタブのみにクラスactiveをつけます。
  $('ul.navi_wrap li').eq(tabno).addClass('active');
});

参考ページ通りなら、
上記の記述で別ページから飛んできても、指定したタブに切り替わって表示されるはず、、、

なのですが
表示が切り替わないだけでなく
「#box03」が選択された状態で表示される。

どこを修正すれば、
指定通りにタブが切り替わってくれるでしょうか？

###追加記述
念のため、読み込んでいるファイルを記載しておきます。

■CSS
common.css------
/* ================================================== /
/ http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
----------以下略

■JavaScript
jquery-1.9.1.min.js----------
/*! jQuery v1.9.1 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery.min.map
*/
----------以下略

Answer 1

なかなか惜しい感じになっていますね。

①

var tabno = $('ul.navi_wrap li#' + tabname).index();

変数tabnameにはタブ名(tabxx)ではなくボックス名(boxxx)が入っています。
よって、

var tabno = $('.box_wrap div#' + tabname).index();

と変更するか、タブ名(tabxx)を指定するように変更するかのどちらかを行います。

②

 if($(hash).length){

ここに$()はいらないです。

③
動く動かないと関係ありませんが、読み込み時と、タブクリック時で、同じ処理をしています。
読み込み時のハッシュからタブを特定し、$(tab).click()でクリックイベントを飛ばしてやれば、行数を減らせます。

Comments

[退会済みユーザー]

moredeepさん　コメントありがとうございます。

ご指摘をもらった①と②を下記のように修正しましたが、思うように動いてくれませんでした。

①-----
以下の部分を
var tabno = $('ul.navi_wrap li#' + tabname).index();
以下に修正
var tabno = $('.box_wrap div#' + tabname).index();
----------

②-----
以下の部分を
if($(hash).length){
以下に修正
if(hash.length){
----------

③については、タブの切り替えができてから、まとめ直してみます。
アドバイスありがとうございます。

ないとは思いますが、他に読み込んでいるファイルのせいかな？
と思ったので、読み込んでいるファイルを、追加で記述しています。

[moredeep]

追記されたcssを適用、jqueryのバージョンを使用し、再度提示のコード＋①、②の修正で確認しましたが、動作するようです。

>思うように動いてくれません
質問文のまま動きは変わらないのでしょうか。変わったのならそれを教えてください。
使用しているブラウザを教えてください。
ブラウザの開発者ツールにて、何かエラーが出ていないかを確認してください。
また、ブレークポイントを張り、該当箇所の処理が実行されていることを確認してください。

[退会済みユーザー]

>質問文のまま動きは変わらないのでしょうか。変わったのならそれを教えてください。
①と②を修正しても、修正する前と、動きが変わりません。

>使用しているブラウザを教えてください。
ChromeとFirefoxです。

>ブラウザの開発者ツールにて、何かエラーが出ていないかを確認してください。
FirefoxのFirebugでみる限り、エラーは出ていません。

[退会済みユーザー]

「別ページから飛んで来たとき、タブを切り替えて表示させたい」とありますが、
別の記述方法で、実装できました。
ですが、これはこれでまた別の問題があるので、別途質問しています。
https://teratail.com/questions/80553?modal=q-comp

今質問している方法も、解決できれば、したいので、引き続きアドバイスをいただけると幸いです。

[moredeep]

こちらchromeで確認できているので、申し訳ないのですが原因がわかりません。
1行ずつ実行や、console.log等で、location.hash、hash(matchの後)、$('ul.navi_wrap li#' + tabname)の結果等の値を表示してみて、どこがおかしいのか探してみてください。

[m.ts10806]

質問者様
いっそのこと現在の状態のソースコードを提示されてはどうでしょうか。
どこかに回答者様の提案どおりにできていない箇所があるのではと思います。

[m.ts10806]

それか質問者様側の意図ややりたいことが上手くこちらに伝わっていないか。
私も理解した感じだと回答者様の今回の提案で上手く動いているように思うので。

[退会済みユーザー]

moredeepさん
アドバイスありがとうございました。
一つ一つ結果を出した結果、たどりつきました。

Answer 2

「別ページからリンクしてきた場合」以下にあるJavaScriptを次のように修正したら、
思うような動きができました。

修正ポイント①読み込みのタイミング
$(function() { → $(window).load(function(){

修正ポイント②ほしい情報の割り出し方
以下のソースコード2カ所を削除

 if($(hash).length){
  //[#box～]である場合、#より後を取得    
    var tabname = hash.slice(1) ;
  } else{
    //[#box～]でない場合、「box01」を表示
    var tabname = "box01" ;
  }

  var tabno = $('ul.navi_wrap li#' + tabname).index();

以下のソースコードを追記

    var tabname = hash.slice(4);
    var tabbar = tabname - 1;

記述し直したものが次のソースコードです。

  $(window).load(function(){
    //#以下を取得
    var hash = location.hash;
    //[#box～]であるか確認
    hash = (hash.match(/^#box\d+$/) || [])[0];
    // さらに割り出し
    var tabname = hash.slice(4);
    var tabbar = tabname - 1;
    
    //コンテンツをすべて非表示
    $('.box_text').css('display','none');
    //指定内容のみ表示
    $('.box_text').eq(tabbar).fadeIn();

    //タブをすべてoff
    $('ul.navi_wrap li').removeClass('active');
    //選択したタブのみon
    $("ul.navi_wrap li").eq(tabbar).addClass('active');
  });

これで、別のページからタブを指定して飛んできたら、
指定したタブを選択した状態で表示されるようになりました。

アドバイスありがとうございました。