Bootstrap Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by Shenfj23

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
    <li><a class='aaa_tab' href="#aaa" data-toggle="tab">AAA</a></li>
    <li><a class='bbb_tab' href="#bbb" data-toggle="tab">BBB</a></li>
    <li><a class='ccc_tab' href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane" id="aaa">...Content1...</div>
    <div class="tab-pane" id="bbb">...Content2...</div>
    <div class="tab-pane" id="ccc">...Content3...</div>
</div>

CSS

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');

.container {
    margin-top: 10px;
}

JavaScript

var loopControl = 0;
$('[data-toggle=tab]').on('show.bs.tab', function (e) {
	
	if(loopControl == 0){
  		e.preventDefault();
  
      var ref = $(this).attr('href').replace('#', '');
			loopControl = 1;
      
      $.ajax({
         url:fetchingFunction(),
         async: false,
         success:function(){
           fakeFunction2();
           $('.' + ref + '_tab').click();
         },
         complete: function(){
         	fakeFunction3();
         }
			});
    } else{

      loopControl = 0;   
    }
});

function fetchingFunction(){
  setTimeout(function() {
  	console.log("1");
  },2000);

}

function fakeFunction2(){
  	setTimeout(function() {
  	console.log("2");
  },1000);


}

function fakeFunction3(){
  	console.log("3");


}