Bootstrap nav tabs/pills works only at first inter

Question

Toggable bootstrap nav tabs/pills work only on first interaction.

Es. TAB A | TAB B | TAB C

If I click A, then B, then C it works, but If I try to re-click any of them it doesn't work.

Every tab work only once.

              <ul class="nav nav-pills nav-justified">
                <li class="active"><a data-toggle="pill" href="#tab-a">TAB A</a></li>
                <li><a data-toggle="pill" href="#tab-b">TAB B</a></li>
                <li><a data-toggle="pill" href="#tab-c">TAB C</a></li>
              </ul>

              <div class="tab-content">
                <div id="tab-a" class="tab-pane fade in active"><!-- Content tab A--></div>
                <div id="tab-b" class="tab-pane fade"><!-- Content tab B--></div>
                <div id="tab-c" class="tab-pane fade"><!-- Content tab C--></div>
              </div>

Answer 1

According to the Bootstrap's Tab usage, each tab needs to be activated individually.

jQuery('a').click(function(e) {
  e.preventDefault()
  $(this).tab('show')
})

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>
    </li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
    </li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
    </li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">a</div>
    <div role="tabpanel" class="tab-pane" id="profile">b</div>
    <div role="tabpanel" class="tab-pane" id="messages">c</div>
    <div role="tabpanel" class="tab-pane" id="settings">d</div>
  </div>
</div>

See: https://jsfiddle.net/edden87/80vrxtmj/