Bootstrap tabs with ajax

example.html

<ul id="MainTabs" class="nav nav-tabs">
  <li><a data-target="#apple" data-toggle="tab" href="/apple.html">apple</a></li>
  <li><a data-target="#banana" data-toggle="tab" href="/banana.html">banana</a></li>
  <li><a data-target="#cherry" data-toggle="tab" href="/cherry.html">cherry</a></li>
</ul>
 
<div class="tab-content">
  <div class="tab-pane" id="apple">Loading...</div>
  <div class="tab-pane" id="banana">Loading...</div>
  <div class="tab-pane" id="cherry">Loading...</div>
</div>

example.js

$(function() {
  $("#MainTabs").tab();
  $("#MainTabs").bind("show", function(e) {    
    var contentID  = $(e.target).attr("data-target");
    var contentURL = $(e.target).attr("href");
    if (typeof(contentURL) != 'undefined')
      $(contentID).load(contentURL, function(){ $("#MainTabs").tab(); });
    else
      $(contentID).tab('show');
  });
  $('#MainTabs a:first').tab("show");
});