JSFiddle - React, Tailwind, and code Playground

by nobuts

HTML

<ul id="MainTabs" class="nav nav-tabs">
  <li><a data-target="#tab1" data-toggle="tab" href="https://twitter.com/images/resources/twitter-bird-white-on-blue.png">Twitter</a></li>
  <li><a data-target="#tab2" data-toggle="tab" href="http://www.granburyrs.com/Portals/29066/images/facebook-logo.png">Facebook</a></li>
  <li><a data-target="#tab3" data-toggle="tab" href="http://www.blogcdn.com//media/2012/04/instagramlogo4912.jpg">Instagram</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane" id="tab1"><img src="https://twitter.com/images/resources/twitter-bird-white-on-blue.png" /></div>
<div class="tab-pane" id="tab2"><img src="http://www.piaget.com/img/loading_gif.gif" />loading...</div>
<div class="tab-pane" id="tab3"><img src="http://www.piaget.com/img/loading_gif.gif" />loading...</div>    
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
#MainTabs{
    margin:5px;
    width:80%;
}

JavaScript

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