JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://eonasdan.github.io/bootstrap-datetimepicker/scripts/moment.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css">
<script src="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/src/js/bootstrap-datetimepicker.js"></script>
<script src="https://github.com/twbs/bootstrap/blob/master/js/collapse.js"></script>
<p>Go to <a href="#tab1" onclick="openTab1()">Tab1</a>.</p>
<p>Go to <a href="#tab2" onclick="openTab2()">Tab2</a>.</p>
<p>Go to <a href="#tab3" onclick="openTab3()">Tab3</a>.</p>
<section id="content">
<div class="container">
<div class="row">
<div class="col-xs-12 wow fadeInDown">
<div class="tab-wrap">
<div class="media">
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="#tab1" data-toggle="tab" class="analistic-01"><i class="fa fa-comments"></i>Tab1</a></li>
<li class=""><a href="#tab2" data-toggle="tab" class="tehnical"><i class="fa fa-pencil-square-o"></i>Tab2</a></li>
<li class=""><a href="#tab3" data-toggle="tab" class="tehnical"><i class="fa fa-check-square-o"></i>Tab3</a></li>
</ul>
</div>
<div class="parrent media-body">
<div class="tab-content">
<div class="tab-pane fade active in" id="tab1">
...
JavaScript
var openTab1 = function() {
$('[href="#tab1"]').tab('show');
}
var openTab2 = function() {
$('[href="#tab2"]').tab('show');
}
var openTab3 = function() {
$('[href="#tab3"]').tab('show');
}