JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home" data-toggle="tab">Home</a>
</li>
<li><a href="#profile" data-toggle="tab">Profile</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane" id="profile">
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark name</td>
<td>Otto name</td>
</tr>
<tr>
<td>Jacob name</td>
<td>Thornton name</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
body {
margin-top: 10px;
}
JavaScript
$('a[data-toggle="tab"]').on('shown', function (e) {
var newt = $(e.target).attr("href"),
prevt = $(e.relatedTarget).attr("href");
console.log("new tab: " + newt) // activated tab
console.log("prev tab: " + prevt); // previous tab
$(newt + " tbody").on("click", "td", function (e) {
console.log("click");
});
var validate = function () {
console.log("prev click ok");
};
$(prevt + " tbody").off("click", "td", validate);
});