JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Tabs Left -->
<div class='tabs-x tabs-left tab-bordered tabs-krajee'>
    <ul id="myTab-7" class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#home-7" role="tab" data-toggle="tab">Home</a></li>
        <li><a href="profile.html" role="tab-kv" data-toggle="tabajax" data-target="#profile-7">Profile</a></li>
    </ul>
    <div id="myTabContent-7" class="tab-content">
        <div class="tab-pane fade in active" id="home-7"><p>HOME</p></div>
        <div class="tab-pane fade" id="profile-7"></div>
    </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;
});