Bootstrapでつくったタブ（JavaScript）の、特定のタブを開いた状態でジャンプ（リンク）したい。

けっこうよくあるパターンだと思います。

Bootstrapのタブに直接リンクする方法としてあちこちに書かれてはあるのですが、なかなかうまく働いてくれない。

試行錯誤の上、なんとかうまくいったので、書き留めておきます。

呼び出す側（リンク元）

<div id="specialty-<?php the_ID(); ?>" class="col-sm-4 specialty-box-outer">
    <div class="loop-specialty-box">
      <div class="specialty-name">
        <?php the_title(); ?>
      </div>
      <div class="link-specialty-information"><a href="<?php the_permalink(); ?>#SpetialtyTab1">診療科紹介</a></div>
      <div class="link-specialty-outpatient"><a href="<?php the_permalink(); ?>#SpetialtyTab2">外来担当表</a></div>
      <div class="link-specialty-doctor"><a href="<?php the_permalink(); ?>#SpetialtyTab3">医師紹介</a></div>
      <div class="link-specialty-achievement"><a href="<?php the_permalink(); ?>#SpetialtyTab4">診療実績</a></div>
    </div>
  </div>

呼び出される側（タブのあるリンク先）

<!-- タブ・メニュー -->
<ul id="SpetialtyTabs" class="nav nav-pills nav-justified">
  <li id="SpetialtyTab1" class="active"><a href="#SpetialtyTabContent1" data-toggle="tab">診療科紹介</a></li>
  <li id="SpetialtyTab2"><a href="#SpetialtyTabContent2" data-toggle="tab">外来担当医表</a></li>
  <li id="SpetialtyTab3"><a href="#SpetialtyTabContent3" data-toggle="tab">医師紹介</a></li>
  <li id="SpetialtyTab4"><a href="#SpetialtyTabContent4" data-toggle="tab">診療実績</a></li>
</ul>

スクリプトはこちら（footer.php）

<script>//ダイレクトリンク
jQuery(function($) {
	//location.hashで#以下を取得 変数hashtabに格納
		var hashtab = document.location.hash;	
		//hashtabの中に#SpetialtyTabが存在するか調べる。
		hashtab = (hashtab.match(/^#SpetialtyTab\d+$/) || [])[0];
		 //hashtabに要素が存在する場合、hashで取得した文字列（#SpetialtyTabContent2,#SpetialtyTabContent3等）から#より後を取得(SpetialtyTabContent2,SpetialtyTabContent3)	
	　　　　if($(hashtab).length){
		var tabname = hashtab.slice(1) ;
		} else{
	　　　　// 要素が存在しなければtabnameにSpetialtyTab1を代入する
	　　　　var tabname = "SpetialtyTab1";
	}
		//コンテンツを一度すべて非表示（activeクラスとinクラスを削除）にし、タブについているクラスactiveを消す
		//$('.tab-pane').css('display','none');
		$('.specialty .tab-content .tab-pane').removeClass('active');
		$('.specialty .tab-content .tab-pane').removeClass('in');
		$('#SpetialtyTabs li').removeClass('active');

		var tabno = $('ul#SpetialtyTabs li#' + tabname).index();
		
		//クリックされたタブと同じ順番のコンテンツを表示します（activeとinを付与）。
		$('.specialty .tab-content .tab-pane').eq(tabno).addClass('active')
		$('.specialty .tab-content .tab-pane').eq(tabno).addClass('in')
		
		//クリックされたタブのみにクラスactiveをつけます。
		$('ul#SpetialtyTabs li').eq(tabno).addClass('active')
			});
</script>

ちなみに参考にさせていただいたのは…

いろはクロスさん、PHPサンプル実験室さん、 teratailのこの質問などなど