<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif;"> <div class="row"> <ul id="myTab" class="nav nav-tabs" style="margin-top:10px"> <li class=""><a href="#home" data-toggle="tab">Home</a></li> <li class="active"><a href="#profile" data-toggle="tab">Profile</a></li> <li class=""><a href="#contact" data-toggle="tab">Contact</a></li> </ul> <div id="myTabContent" style="margin-top:10px" class="tab-content"> <div class="tab-pane fade " id="home"> <div class="alert alert-success" role="alert" id="1" style="margin-bottom:10px;" > <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <strong>Home</strong> Tab </div> </div> <div class="tab-pane fade in active" id="profile"> <div class="alert alert-info" role="alert" id="2" style="margin-bottom:10px;" > <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <strong>Profile</strong> Tab </div> </div> <div class="tab-pane fade" id="contact"> <div class="alert alert-warning" role="alert" id="3"> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <strong id="contactid">Contact</strong> </div> </div> </div> <div id=debug></div> <br> <button class="btn btn-success" id=clr>clear</button> </div> </div>

#debug { background: black; color: yellow; height: 100%; width: 100%; /*margin-top: 5px;*/ padding: 15px; overflow: auto; font-weight:bold; border-radius:5px 5px; }

$(document).ready(function(){ $("a[href='#home']").on('shown.bs.tab', function(e) { logView('- Home tab shown after been shown'); }); $("a[href='#contact']").on('shown.bs.tab', function(e) { $("#contactid").text("Contact Tab Clicked") }); // or even this one if we want the earlier event $("a[href='#profile']").on('show.bs.tab', function(e) { logView('- Profile tab shown after been shown'); }); //////////////////// just some logging help ////////// $log = $('#debug'); $('#clr').click(function() { $log.empty(); }); logView = function(msg) { d = new Date(); time = "" + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + ':' + d.getMilliseconds(); $log.prepend(time + ' ' + msg + '<br>'); } logView('- Profile tab shown main page first loading!!'); });