JSFiddle - React, Tailwind, and code Playground

by Sanjay Mysoremutt

HTML

<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li class=""><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade active in" id="home">
    home tab!
  </div>
  <div class="tab-pane fade" id="profile">
    profile tab!
  </div>
</div>

<div id=debug></div>

CSS

#debug {
    background: black;
    color: green;
    height: 300px;
    margin-top: 20px;
    font-family: 'Couier';
    padding: 10px;
}

JavaScript

$log = $('#debug');

log = function(msg) {
    $log.prepend(msg + '<br>');
}

$("a[href='#home']").on('shown.bs.tab', function(e) {
      log('shown - after the tab has been shown');
});

 // or even this one if we want the earlier event
 $("a[href='#home']").on('show.bs.tab', function(e) {
      console.log('show - before the new tab has been shown');
 });