bootstrap 3 tabs not working properly

According to the Docs you need to put an id on each link in the header and that link needs to be inside the li which should have no other styles, i.e doesn't need all the data-target stuff in the li. Your list has with no data-toggle or id.

Your HTML would be like this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs">
   <li><a href="#a" data-toggle="tab">a</a></li>
   <li><a href="#b" data-toggle="tab">b</a></li>
   <li><a href="#c" data-toggle="tab">c</a></li>
   <li><a href="#d" data-toggle="tab">d</a></li>
</ul>

<div class="tab-content">
   <div class="tab-pane active" id="a">AAA</div>
   <div class="tab-pane" id="b">BBB</div>
   <div class="tab-pane" id="c">CCC</div>
   <div class="tab-pane" id="d">DDD</div>
</div>

And you shouldn't need any Javascript, according to the Docs

This will work

$(".nav-tabs a").click(function(){
     $(this).tab('show');
 });

In my case, I have two elements with the same id. I could not notice the cause of problem for a long time, because the first such element was hidden.

Make sure your jquery is inserted BEFORE bootstrap js file:

<script src="jquery.min.js" type="text/javascript"></script>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="bootstrap.min.js" type="text/javascript"></script>