Bootstrapのタブに直接リンクする方法

Bootstrapネタです。タブに直接リンクすることがあったのでちょいメモです。まあ、ドキュメント見れば分かりそうなんですが一応です。
ハッシュ名が違う場合の仕方です。ページ遷移してもタブが開いています。直接タブにいく場合のパターンを書きました。

参考になれば幸いです。


スポンサーリンク


タブハッシュ名が違う場合

 
<script>
	$(function () {
		var hash = document.location.hash;
		var prefix = "tab-";
		if (hash) {
			$('#myTabs a[href='+hash.replace(prefix,"")+']').tab('show');
		}
 
		$('#myTabs a').on('shown.bs.tab', function (e) {
			window.location.hash = e.target.hash.replace("#", "#" + prefix);
		});
	})
</script>

ハッシュ名が同じでタブ前まで移動

<script>
	$(function () {
		var hash = document.location.hash;
 
		if (hash) {
			$('#myTabs a[href='+hash+']').tab('show');
		}
 
		$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
			e.target // newly activated tab
			e.relatedTarget // previous active tab
		});
 
	})
</script>

デモサイト

Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です