JSFiddle - React, Tailwind, and code Playground

by Dan Zeller

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-pills nav-stacked" id="mainNavList">
  <li class="active"><a data-toggle="pill" href="#displaySection0">Demographic Info</a></li>
  <li><a data-toggle="pill" href="#displaySection1">Supporting Documentation</a></li>
  <li><a data-toggle="pill" href="#displaySection2">Rights & Autonomy</a></li>
</ul>

JavaScript

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {

  var target = $(e.target).attr("href") // activated tab
  alert("href: " + target);

  console.log("href: " + target);


});