JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <body>
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Chart 1</a></li>
  <li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Chart 2</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="chart1">
    <p>tab1</p>
  </div>
  <div class="tab-pane" id="chart2">
      <p>tab2</p>
  </div>
</div>

  </body>

JavaScript

$(function() {
    $('#tab1').on('shown.bs.tab', function (e) {
        alert("tab1");
    });

    $('#tab2').on('shown.bs.tab', function (e) {
        alert("tab2");
    });
});