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

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
*/
----------以下略