JSFiddle - React, Tailwind, and code Playground

by Emmanuel Garcia

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"> <div align="center">
<iframe name="myiframe" width="780" height="900" scrolling="no" frameborder="0"   marginheight="0" marginwidth="0" src="http://rvcmembers.com/PointsUsageCalendar/2014-2016/English/2014/2014.html"></iframe>
</div> 
 </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
         
                });
            });