Bootstrap with Ajax Tabs

SO: http://stackoverflow.com/q/12745149/570918

by nobuts

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs tabs-up" id="friends">
  <li><a href="/gh/gist/response.html/3843293/" data-target="#contacts" class="media_node active span" id="contacts_tab" data-toggle="tabajax" rel="tooltip"> Contacts </a></li>
  <li><a href="/gh/gist/response.html/3843301/" data-target="#friends_list" class="media_node span" id="friends_list_tab" data-toggle="tabajax" rel="tooltip"> Friends list</a></li>
  <li><a href="/gh/gist/response.html/3843306/" data-target="#awaiting_request" class="media_node span" id="awaiting_request_tab" data-toggle="tabajax" rel="tooltip">Awaiting request</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="contacts"></div>
  <div class="tab-pane" id="friends_list"></div>
  <div class="tab-pane  urlbox span8" id="awaiting_request"></div>
</div>

JavaScript

$('[data-toggle="tabajax"]').click(function(e) {
  var $this = $(this),
    loadurl = $this.attr('href'),
    targ = $this.attr('data-target');

  $.get(loadurl, function(data) {
    $(targ).html(data);
  });

  $this.tab('show');
  return false;
});