JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="products container">
    <ul class="nav nav-tabs">
        <li class="active"> <a data-toggle="tab" href="#productA">
                <span class="glyphicon glyphicon glyphicon-plus-sign"></span>productA
            </a>

        </li>
        <li> <a data-toggle="tab" href="#productB">
                <span class="glyphicon glyphicon glyphicon-align-left"></span>productB
            </a>

        </li>
    </ul>
    <div class="products-body">
        <div class="tab-content">
            <div id="productA" class="tab-pane active fade in">...</div>
            <div id="productB" class="tab-pane fade">...</div>
        </div>
    </div>
</div>

JavaScript

$('.nav-tabs a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});
var anchor = "productB" || $(".nav-tabs a").first().attr("href").replace('#', '');
//console.log(anchor);
$('.nav-tabs a[href=#' + anchor + ']').tab('show');