タブ切り替え時にJavaScriptを実行させる方法

2021.02.18

技術関連

Bootstrapを使うとプログラムなしでタブ切り替えのWEBページが作れます。以下参照。ですが、タブを切り替えた時に何かをやりたい！と思ったのです。React等をつかっておけばよかったのですが、すでにあるサイトでしたので、どうしたら良いものか？と検索して実装した時のメモです。

普通にやる場合

<ul class="nav nav-tabs" id="myTab">
  <li><a href="#overview" data-toggle="tab" aria-selected="true">Overview</a></li>
  <li><a href="#profile" data-toggle="tab" aria-selected="false">Profile</a></li>
  <li><a href="#timeline" data-toggle="tab" aria-selected="false">Timeline</a></li>
  <li><a href="#activity" data-toggle="tab" aria-selected="false">Activities</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="overview">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="timeline">...</div>
  <div class="tab-pane" id="activyty">...</div>
</div>

ここで、タブをクリックした時点でサーバーから何かを読み込ませるためには

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var activated_tab = e.target // activated tab
  var previous_tab = e.relatedTarget // previous tab

  alert(activated_tab);
})

こんな感じでできるようです。便利！

参考サイト：
https://qiita.com/imai/items/3e0e4c2fe004cede4037