using twitter bootstrap with tabbed - ajax content

http://stackoverflow.com/questions/12052764/using-twitter-bootstrap-with-tabbed-ajax-content

by Damith Nuwan Sampath

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css">
        <div class="tabbable">
          <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#tab1"> tab 1</a></li>
            <li><a data-toggle="tab" href="#tab2">tab 2</a></li>
            <li><a data-toggle="tab" href="#tab3">tab 3</a></li>
            <li><a data-toggle="tab" class="ajax" href="http://fiddle.jshell.net/mmfansler/HEseF/show/">tab 4 - ajax</a></li>
          </ul>
          <div class="tab-content">
            <div id="tab1" class="tab-pane active"> tab 1 content </div>
            <div id="tab2" class="tab-pane"> tab 2 content </div>
            <div id="tab3" class="tab-pane"> tab 3 content </div>
            <div id="tab4" class="tab-pane"> </div>
          </div>
        </div>

JavaScript

$(function() {
                
                $('.ajax').click(function (e) {
                  var thisTab = e.target // activated tab
                  var pageTarget = $(thisTab).attr('href');
                  //get number of li in list of tabs:
                  var itemNumber = $(this).parent().index()+1;
                  $('.tab-pane').removeClass('active');
                  $("#tab"+itemNumber).load(pageTarget).addClass('active'); //using html() just in case load() doesnt work here
         
                });
            });