bootstrap 3 tabs not working properly

twitter-bootstrap-3

Solution

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

Problem

I almost copied the code from their website. The tab is initiated perfectly, and when I click on tabs, new panels are activated. However, the "active" class is not applied to the activated tab. This is the code: ``` <ul class="nav nav-tabs"> <li data-toggle="tab" data-target="#a" class="active"><a href="#">a</a></li> <li data-toggle="tab" data-target="#b" ><a href="#">b</a></li> <li data-toggle="tab" data-target="#c" ><a href="#">c</a></li> </ul> <div class="tab-content"> <div class="tab-pane fade in active" id="a"> in tab a </div> <div class="tab-pane fade" id="b">in tab b</div> <div class="tab-pane fade" id="c">in tab c</div> </div> ```

Original source